shadcn.io is not affiliated with official shadcn/ui
Assignee Task List Block for Radix UI
A task list for five housemates with member chips showing open and done counts and a done-share bar, an Assign picker on every row including Unassigned, and a sentence that says what the chosen person has left.
Installation
Overview
Share a list between people, with this assignable to-do list block for React with Radix UI. A row of member chips sits over the list, Everyone first. Each chip has an initials Avatar, the person's open and done counts, and a thin bar of how much of their list is finished; the chosen chip fills in and the list narrows to that person. A sentence under the chips says it in words, "Nora has 2 open, 2 done". Every row has an Assign Popover with each member and Unassigned, and handing a task over updates both people's counts at once and says so in the status line. The Shine Button adds a task for the chosen member, or for nobody when Everyone is chosen. An Empty state shows when someone has nothing assigned. Guides rule the bands. For household chores, small teams and any list with owners.
FAQ
Where do the counts come from?
They are computed from the task array on every render: open and done tasks for each member, and the bar is done divided by all of that person's tasks. Nothing is typed in, so the chips, the sentence and the status line always agree.
What happens when I reassign a task while a person is chosen?
The task leaves that person's list and joins the other's. Focus moves to the list so keyboard users don't lose their place, and the status line says who has the task now and what their counts are.
What stays local, and how do I save for real?
Everything. The tasks live in page state and nothing is sent anywhere, so the list resets when you reload. In your app write each change from add, toggle and assign to your own store and load the first list from it.