shadcn.io is not affiliated with official shadcn/ui
Sprint Board Carousel Block for React Aria
Five sprint columns as slides, two and a bit in view, each a list of cards with initials, points and a priority word, where Move to the next column recounts both columns and puts focus on the next card.
Installation
Overview
Work a sprint board one column at a time with this sprint board carousel for React with React Aria. Boardwren, a sprint planner, lays five columns (Backlog, To do, Doing, Review and Done) on a hairline track, two and a bit in view from the medium breakpoint and one with the next peeking on a phone. Each column is a held, scrolling list of cards with a title, the assignee's initials, story points and a priority word with a drawn weight. A card's "Move to Doing" button sends it to the next column: both columns recount their cards and points, focus lands on the next card in the column it left, and the status line says where it went. "Undo move" puts the last move back. Done never moves on. It is built from Carousel, Badge, Button and Guides, with CSS transitions only. The product, the cards and the people are made up for the example.
FAQ
What happens when I move a card?
It leaves its column and joins the end of the next one. Both columns recount their cards and story points, focus goes to the card that was below it (or above it, or the column title if it was the last), and the status line names the card and the column. Moving is one column forward only, and Done has no move.
How does Undo work?
It restores the last move: the card goes back to the column it came from, at the place it held. Only one move is kept. The button is always in the layout and only shows when there is something to undo.
Why do the columns stay the same height?
Each column list is a fixed-height scroll region, so a column with two cards and one with eight line up and moving a card never resizes the board.
How does it work with a keyboard?
Tab reaches each card's move button in the columns in view, then Undo, Previous and Next. Columns out of view are hidden from the tab order and screen readers. The line in the foot is the one live region.