shadcn.io is not affiliated with official shadcn/ui
Agile Sprint Board Kanban Block for Radix UI
A five-column sprint board of twelve stories with points and owners, where each card moves by dragging its grip, by keyboard, or from a Move to menu, with a rule that keeps unreviewed work out of Done.
Installation
Overview
Run a sprint from one screen with this agile board for React with Radix UI. A hairline frame with a plus mark on each corner holds five columns that share their lines (Backlog, Ready, In dev, In review and Done) and twelve stories. Each card shows its title, its type as an icon and a word in an outline Badge, its points and its owner's initials in an Avatar; every column head counts its cards and totals its points, and the sentence under the heading is worked out from the cards, so it follows every move. A card moves three ways: drag it by its grip, focus the grip and press Space to pick it up, the arrow keys to move it, Space to drop it and Escape to cancel, or open its Dropdown Menu and choose a column under "Move to", which is the route for a single pointer and for touch. One rule guards the board: a story can't reach Done without passing In review, and the refusal says which story, where it is and what to do. A polite status line in the foot reports each move, and Reset puts the board back. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region with the next column showing. For sprint planning, team boards and any app that tracks work through stages.
FAQ
How do I fill it with my own stories?
Edit COLUMNS and START. A column has an id and a name; a card has an id, the column it starts in, a title, a kind (Feature, Bug or Task), its points and the owner's name, from which the initials are drawn. The cards are kept in column order, and every count, total and sentence is calculated from them, so nothing else needs editing.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the story's title. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place, ArrowLeft and ArrowRight to go to the neighbouring column (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 redirect after sign-in, In dev, position 1 of 3."
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 a "Move to" choice for every column and the current one ticked. Choosing one moves the card, puts focus on the card in its new place and says so in the status line.
How does the Done rule work, and how do I change it?
The rule is the function refusalOf, which gets the cards, the story, the column it comes from and the column it is going to, and returns a reason or an empty string. The grip's drop, the keyboard steps and the menu all ask it, so no route gets around it. A refused move leaves the story where it was and the status line gives the reason. Replace the body with your own rule, such as a limit on work in progress.
What stays in the demo, and how do I save the moves?
Everything: the moves 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, the one function every finished move goes through (the menu, a drop and the block's own buttons), and update the cards from the response. The stories and people are made up.
How does it work on a phone?
The board is a sideways scroll region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu is the other way to move a card. The status line is still read out to screen readers.