Shadcn.io is not affiliated with official shadcn/ui
Todo List Quick Add
A todo list block with smart syntax parsing for React and Next.js featuring inline token detection for priority, assignee, tags, and due dates with live preview badges built with shadcn/ui and Tailwind CSS
Add tasks at lightning speed with this smart-parsing todo list block for React and Next.js. Type special syntax like !high for priority, @alex for assignee, #work for tags, and >tomorrow for due dates to see colored badges appear in real time. A parsed preview shows the final task structure before submission. Built with TypeScript, shadcn/ui Badge, Input, Button, and Checkbox components, motion staggered animations, and Tailwind CSS. Perfect for power-user task managers, CLI-style productivity tools, and developer-focused project boards.
Related Components
Notes Todo List
Todo list with expandable notes
Attachments Todo List
Todo list with file attachments
Comments Todo List
Todo list with comment threads
Estimation Todo List
Todo list with story points
Archive Todo List
Todo list with archive functionality
Template Todo List
Todo list with task templates
FAQ
Was this page helpful?
Sign in to leave feedback.
QA Checklist
A QA testing checklist block for React and Next.js with pass/fail/skip test results, category grouping, severity badges, and pass rate summary built with shadcn/ui and Tailwind CSS
Reading List
A reading tracker block for React and Next.js with currently reading highlight, page progress bars, genre badges, star ratings, and want-to-read queue built with shadcn/ui and Tailwind CSS