Shadcn.io is not affiliated with official shadcn/ui
Todo List Split View
A split-panel todo list block for React and Next.js with a task list and detail panel showing metadata, description, and actions built with shadcn/ui and Tailwind CSS
View tasks in a master-detail layout with this split-panel todo list block for React and Next.js. Features a scrollable task list on the left and a detail panel on the right showing full description, priority, due date, and action buttons. Built with TypeScript, shadcn/ui Badge, Button, and Checkbox components, framer-motion entrance animations, and Tailwind CSS. Perfect for project management dashboards, email-style task clients, and any workflow requiring quick task inspection.
Related Components
Card View Todo List
Grid-based card layout for tasks
Table View Todo List
Spreadsheet-style sortable table
Compact Todo List
Ultra-dense compact task view
Timeline Todo List
Vertical timeline layout
Nested Todo List
Multi-level deep nesting
Analytics Todo List
Task statistics dashboard
FAQ
Was this page helpful?
Sign in to leave feedback.
Social Media
A social media post scheduler todo list block for React and Next.js with platform badges, scheduled times, engagement placeholders, and queue management built with shadcn/ui and Tailwind CSS
Sprint Backlog
An agile sprint backlog todo list block for React and Next.js with story points, burndown progress, and status sections built with shadcn/ui and Tailwind CSS