shadcn.io is not affiliated with official shadcn/ui
Avatar Stack Table Block for Radix UI
A sprint board whose assignee cell is a stack of initials and a plus count that opens a popover of checkboxes: ticking assigns a teammate, unticking removes them, an empty cell is a dashed circle and Unassigned.
Installation
Overview
Assign people from the cell that shows them, with this avatar stack table for React with Radix UI. A framed panel holds a native table of six sprint tasks from a project tool (task, assignees, status and due date). The assignee cell is one button: up to three overlapping initials and a "+2" for the rest, or a dashed circle and "Unassigned". Its name lists the people and the count ("Landing page: 5 assigned, Maya Oyelaran, Ilario Fenwick, Selma Okwuosa, Tomasz Wenderoth, and Anneliese Dube. Change assignees"). Pressing it opens a Popover with a Checkbox for each of the six teammates, their role beside them; ticking one assigns them, unticking removes them, and the stack, the count in the popover and the line over the table update at once. A polite line says who went where ("Maya Oyelaran assigned to Landing page"). Initials sit in Avatars, never photos, and the status is a word in a Badge with a dot. It's built from Avatar, Popover, Checkbox, Badge and Guides, with a CSS entrance only. For boards, task lists, rosters and any table where people are attached to rows.
FAQ
What does a screen reader hear on the stack?
The button's name lists the task, how many people are on it and who, then "Change assignees", so the three drawn initials and the "+2" are hidden from assistive technology and add nothing the name doesn't say. An empty cell reads "Landing page: unassigned. Change assignees".
How does ticking and unticking work?
Each checkbox is one teammate on that task. Ticking adds them, unticking takes them off, and the stack always draws the people in the team's order, whichever way they were ticked. The stack is the same button before and after, so focus never leaves it, and the popover stays open so you can change several people at once.
Can I do it all from the keyboard?
Yes. Tab to the stack, press Enter or Space to open the popover, Tab through the checkboxes and press Space to tick, and Escape closes it with focus back on the stack.
Where does the line over the table come from?
It is derived from the rows ("13 assignments on 6 tasks, 1 unassigned") and is replaced by the last change ("Maya Oyelaran removed from Release notes.") after each tick. It is the block's one polite line, present from load.
How does it look on a phone?
The task keeps its name, the stack stays, the status stays, and the due date folds under the task's name (the Due column goes). The popover is the same list of checkboxes at any width.
What stays local, and how do I wire it for real?
The six tasks and the six teammates are typed in START and TEAM, and assigning only changes this tab. To wire it, call your API from toggle, apply the change optimistically as it does now, and put the person back (and say so in the polite line) if the call fails.