shadcn.io is not affiliated with official shadcn/ui
Sprint Capacity Kanban Block for React
A sprint planning board with a Backlog and one column per person, each with a points capacity bar, where a move that would put someone over capacity is refused and says who has room.
Installation
Overview
Plan a sprint against what each person can take with this capacity board for React with Base UI. A hairline frame with a plus mark on each corner holds a Backlog and one column for each of three people, thirteen stories in all. Every story shows its title, an outline Badge for its area and its points; every person's head shows their points against their capacity ("7 of 8 pts") with a small bar drawn in SVG, and the header sentence adds up the capacity taken and the capacity left. A story moves to a person by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu. A move that would put someone over their capacity is refused, and the refusal says how many points they have, how many the story takes and who has room; moving a story back to Backlog always works. A polite status line reports each move and Reset restores the plan. On a phone the columns scroll sideways in one named region. For sprint planning, workload balancing and any board where a lane has a budget.
FAQ
How do I use my own team and stories?
Edit COLUMNS and START. A column has an id, a name and a capacity in points (0 for the Backlog, which has no limit); a story has an id, the column it starts in, a title, an area and its points. The header sentence, the bars and the refusals are all worked out from those, so they follow your numbers. People and stories in the demo are made up.
Why was my move refused?
refusalOf adds the story's points to the person's current load and refuses when the total goes over their capacity. The drag, the keyboard and the menu all ask it, so the answer is the same on every route. The message names the person, their load, the story's size and whoever still has room. Move something off their column first, or choose someone else. To allow going over with a warning instead, return an empty string and show the overload in ColumnNote.
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. Space or Enter picks it up, the arrow keys move it (left and right change column, and swap in right-to-left languages), Home and End jump to the ends, Space drops it and Escape puts it back. The rule applies to every step, and each step is announced in the status line.
Are the capacity bars accurate for a screen reader?
The bar is decoration. Each head says the same thing in text ("7 of 8 pts", with "full" added when the person is at their limit), and the bar has a title with the same numbers, so nothing is learned from the drawing alone.
What stays in the demo?
Everything: the moves live in the component's state, nothing is saved, and a reload or Reset restores the starting plan. To keep a plan, save the cards from put and load them into START; the capacity check should also run on your server, since a client can be bypassed.
How does it look on a phone?
The columns scroll sideways with the next column showing, each column scrolls inside the board's fixed height, and nothing changes size when a card moves or a move is refused. Touch drags from the grip only, so the board still scrolls; the card's menu is the other way to move it.