shadcn.io is not affiliated with official shadcn/ui
Avatar Stack Table Block for React
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 Base 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.
Related
- Pro
Tags Table
Rich cellsA note library whose rows carry tag buttons: two show and a plus button opens the rest in a popover, pressing any tag filters the table to the notes that have it, and a strip says Tag and how many of the seven remain.
- Pro
Link Cell Table
Rich cellsA reading list whose titles are real links: an arrow and a name that says opens in a new tab on links to other sites, plain links inside the app, truncated hosts with the whole address in a title, and a preview card on hover or focus.
- Pro
Row Selection Table
Select and actA stock list with a checkbox on every row, a head checkbox that shows a dash when only some are ticked, Shift-click range select and a live line that adds up the price of the ticked rows.
- Pro
Row Actions Table
Select and actA task table with one state-advancing button per row, Start then Mark done then Reopen, that shows a pending spinner, updates the status, the counts and a polite line, and returns focus to the row.
- Pro
Effective Priority Table
Rich cellsA ticket queue where a switch raises any ticket due within two days by one level, shown as drawn bars, a word and a raised-from note, and the Priority head sorts by that effective rank.
- Pro
Avatar Stack Reviews
Score summariesA slim band of the six newest reviewers as a stack of initials that open a card of their review, a +34 link for the rest, and the score and count worked out from a typed tally.