shadcn.io is not affiliated with official shadcn/ui
Card View Task List Block for React
The same ten tasks as rows or as a two-column grid of cards, switched by a List and Cards control, each with a checkbox, due label, priority, Push a day and Raise priority actions.
Installation
Overview
Let people choose how to see their work, with this card view to-do list for React with Base UI. A Toggle Group with List and Cards, each with an icon, swaps the same ten tasks between rows and a two-column grid of cards on shared hairlines. Every task, in either view, has a Checkbox named by its title, a due label worked out from a fixed day, a priority shown as an arrow and a word, and two quick actions: Push a day moves the due date forward one day and Raise priority steps Low to Medium to High. Both views sit in one grid cell with the hidden one unseen and inert, so switching never changes the height, and the choice is announced as "Card view" or "List view". The foot counts what is done and what is overdue. Bands are ruled by Guides, and the only motion is a CSS entrance. For visual task walls, personal planners and any list that people want to scan as tiles.
FAQ
How do I load my own tasks?
Replace START. Each task has an id, a title, a done flag, an ISO due date and a numeric priority from 0 (Low) to 2 (High). Due labels are worked out against the fixed AS_OF day, which you point at the current date when you use real data.
What stays local, and how do I save for real?
Everything. Ticking, pushing and raising change state on the page and nothing is sent, so the wall resets on reload. In your app write the change from toggle, push and raise to your own store.
Why are both views in the page at once?
So the height holds. The list and the cards are laid in the same grid cell and the one you are not looking at is unseen, inert and hidden from assistive technology, so the frame never jumps when you switch and the checkboxes are only reachable in the visible view.
What do the quick actions do?
Push a day adds one day to the due date of an open task, and a finished task keeps its date. Raise priority moves Low to Medium to High and stays put at High. Both buttons have names that include the task, and both say what happened in the status line.