shadcn.io is not affiliated with official shadcn/ui
Team Sprint Standup Kanban Block for Radix UI
A standup board with a lane for each of five people that a Next speaker button walks through, with a Blocked toggle on each card and rules that keep blocked cards out of Done.
Installation
Overview
Run a standup from the board itself with this team sprint board for React with Radix UI. A hairline frame with a plus mark on each corner holds a lane for each of five team members and three statuses (Todo, In progress and Done) over thirteen cards. "Next speaker" in the header walks the team: it lights one lane at a time with a ring and the word "Speaking", quiets the others, and says the member's name and their three lines in the status; the walk wraps round from the last person to the first, and Reset stops it. A lane head reads three lines that are worked out from its cards ("Done", "Doing" and "Blocked"). Each card has a "Blocked" Toggle, and two rules refuse with the reason in words: a blocked card can't be done, and nobody has more than two cards in progress. A card moves three ways: drag its grip, focus the grip and use Space, the arrow keys and Escape, or open its Dropdown Menu and choose "Move to" a status or "Hand to" a person. A polite status line in the foot reports each move, and the frame is ruled by Guides. For daily standups, small-team boards and any meeting that walks person by person.
FAQ
How do I use my own team and cards?
Edit LANES, STATUSES and START. A lane has an id and a name; a card has an id, a title, a blocked flag and the column it starts in, written as the lane and the status joined by a dot (yara.doing). The three lines in each lane head and the header sentence are worked out from the cards.
How does the Next speaker walk work?
The component keeps the id of the lane that is speaking. Each press moves it to the next lane (the first, when nobody is speaking yet, and the first again after the last), rings that lane's head, shows the word "Speaking" in a slot that was reserved so nothing shifts, and puts a quieter ground behind the other lanes. The status line says who is speaking and reads their three lines. Reset clears it. It is a visual aid, not a timer: nothing advances by itself.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place in the cell (at the top or bottom of a cell the card crosses into the neighbouring member's cell in the same status), ArrowLeft and ArrowRight to go to the neighbouring status in the same member (the arrows swap in right-to-left languages), Home and End for the first and last place, Space or Enter to drop it and Escape to put it back. Every step is announced in the status line, for example "Fix the flaky signup test, Kasimir Dole, Done, position 1 of 2."
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card also has a "More actions" menu with two groups of choices: "Move to" each status and "Hand to" each member, the current one ticked in both. Choosing one moves the card, puts focus on the card in its new place and says so in the status line.
How do the rules work, and how do I change them?
refusalOf returns a reason or an empty string. A card whose blocked flag is set can't enter Done, and a cell in In progress that already holds DOING_CAP cards takes no more; the drop, the keyboard steps and the menu all ask it. A Done card's Blocked toggle is disabled, so a finished card can't be marked blocked. A refused move leaves the card where it was and the status line gives the reason.
What stays in the demo, and how do I save the moves?
Everything: the moves, the blocked flags and the speaker live in the component's state, nothing is sent anywhere, and a reload or Reset brings back the starting board. To save for real, call your API from put and from the Blocked toggle's handler. The people and cards are made up.