shadcn.io is not affiliated with official shadcn/ui
Kanban Board Reviews Block for React Aria
Twelve reviews of an appliance-repair firm in four state lanes (New, In review, Replied, Resolved), each card with a Move to menu instead of dragging, counts worked out from where the cards sit.
Installation
Overview
A review board for React with React Aria, for Wickbridge, a fictional appliance-repair firm. Four lanes, New, In review, Replied and Resolved, share hairlines in one band under a rule, each with its name and a count worked out from where the cards are. A card shows the stars and their value in words, a title, one line of the review and the reviewer, with a "Move to" menu that lists the four lanes and ticks the current one. There is no dragging, so the keyboard does everything: moving a card updates both counts, puts focus on it in its new lane and says so in a polite line. The Resolved lane lists titles only. Each lane scrolls inside a fixed height, so the board never changes height when a card moves. It's built from Dropdown Menu, Badge, Avatar and Rating with CSS transitions only. On a phone the lanes sit in one named scroll area with the next lane peeking.
FAQ
How do I change the cards and the lanes?
Edit LANES and CARDS at the top of the file. A card starts in the lane named by its lane, and each lane's count and cards are filtered from that. Moving a card changes only where it sits; the order inside a lane is the order the cards are typed in, so a moved card appears among its new neighbours rather than at the top.
Why is there no dragging?
A menu works with a keyboard, a screen reader and a thumb, and dragging works with only one of them. "Move to" opens a menu of the four lanes with the current one ticked; choosing one moves the card. Focus then lands on the same card's menu button in its new lane, scrolled into view inside the lane.
What happens when a lane has more cards than fit?
The lane scrolls on its own: each lane is a named, focusable scroll region with a fixed height, so moving cards in and out never makes the board taller or shorter. Press Tab to reach a lane, then use the arrow keys or the page keys to scroll it. The counts above each lane say how many cards it holds, including ones out of view.
Does the board keep honest negative reviews?
Yes: lanes are workflow states, not a filter. A one-star review sits in New or In review like any other until someone answers it, and nothing on the board hides a review for its rating. Moving a card only changes its state here; the polite line says "Nothing is published in this demo" and a reload starts afresh.