shadcn.io is not affiliated with official shadcn/ui
Grouped Task List Block for Radix UI
Ten tasks in an accordion of Development, Design, Marketing and Ungrouped, each with a done count, a Move to group select that really moves a task, Mark all done, and a one-line Undo.
Installation
Overview
Sort one shared list by team, with this grouped to-do list block for React with Radix UI. An Accordion that can keep several groups open holds Development, Design, Marketing and Ungrouped. Each header shows the group name, an outline Badge with how many of its tasks are done ("2 of 4"), and, while the group is folded, one line saying what is due next. Every task is a Checkbox named by its title with a due label worked out from a fixed day, and a Native Select that moves it to another group: the group it lands in opens and focus stays on the select. "Mark all done" beside each header ticks that group's open tasks, and "Collapse all" or "Expand all" in the header works the whole list. Moves and bulk ticks leave a one-line Undo in the foot. A group you empty keeps its place and says so. Bands are ruled by Guides, and the only motion is a CSS entrance and a fade on the task you moved. For team backlogs, project task lists and any product that sorts one list by owner or area.
FAQ
How do I load my own tasks and groups?
Replace GROUPS and START. Each task has an id, a title, a group that matches a group id, a done flag, an ISO due date and a priority word. Group headers, counts, the folded summary line and the due labels are all worked out from those arrays and the fixed AS_OF day, so nothing else needs editing.
What stays local, and how do I save for real?
Everything. Ticking, moving and marking all done change state on the page and nothing is sent, so the list resets on reload. In your app write the new group or done flag from move, toggle and allDone to your own store, and load the starting list from it.
How does moving a task between groups work?
The select next to each task lists every group. Choosing one moves the task there at once, opens that group if it was folded, keeps focus on the select and says "Moved 'x' to Design" in the status line. Undo in the foot puts it back in its old group.
Can several groups be open at once?
Yes, any number. Collapse all and Expand all switch every group together, and the button's name follows the state. The arrow keys move between group headers.