Shadcn.io is not affiliated with official shadcn/ui
Todo List Card View
A card-based todo list block for React and Next.js with responsive grid layout, priority indicators, and list/card toggle built with shadcn/ui and Tailwind CSS
Display tasks as visual cards with this responsive grid todo list block for React and Next.js. Features a toggle between list and card view, each card showing title, status dot, due date, and priority level in a responsive two-column grid. Built with TypeScript, shadcn/ui Badge, Button, and Checkbox components, framer-motion staggered animations, and Tailwind CSS. Perfect for visual task managers, project overviews, and creative workflow tools.
Related Components
Compact Todo List
Ultra-dense compact task view
Split View Todo List
List with detail panel
Table View Todo List
Spreadsheet-style sortable table
Grouped Todo List
Tasks organized by category
Multi Board Todo List
Tabbed multiple boards
Progress Board Todo List
Visual progress tracking
FAQ
Was this page helpful?
Sign in to leave feedback.
Calendar View
A calendar-organized todo list block for React and Next.js with date-grouped tasks, due date indicators, and overdue highlighting built with shadcn/ui and Tailwind CSS
Changelog
React todo list activity changelog block for Next.js with expandable task histories, event type filters, user avatars, and timestamps using shadcn/ui and Tailwind CSS