shadcn.io is not affiliated with official shadcn/ui
UI Component Tracker Kanban Block for React Aria
A three-column component library tracker of nine components, each with a Web, iOS and Android status you can step on, where nothing is Published until all three platforms have shipped.
Installation
Overview
Track a component library across platforms with this board for React with React Aria. A hairline frame with a plus mark on each corner holds three columns that share their lines (Backlog, Building and Published) and nine components. Each card names its component and type in a Badge and lists three platforms, Web, iOS and Android, each with a Button that shows its status as a glyph and a word and steps it on from Planned to Building to Shipped and round again. A component can't be Published until all three platforms have shipped, and the refusal names the platforms still to do. Every column head counts its components and the platform builds shipped of those it holds, and the sentence under the heading is worked out from the cards. A card moves by dragging its grip, from the keyboard, or from its Dropdown Menu under "Move to"; a polite status line in the foot reports each change and Reset puts the board back. The frame is ruled by Guides. For design systems, cross-platform libraries and any roadmap with a status per target.
FAQ
How does a platform's status change?
Each platform row is a button named with the component, the platform and its status. Pressing it steps the status on (nextStatus: Planned, Building, Shipped, then Planned again) and the status line says the result. The status is a glyph and a word, not a colour. The platforms are the PLATFORMS list, so add or rename one there.
What does Published require?
The function refusalOf returns a reason when a component goes to Published and any platform is not Shipped; it lists the platforms still to do. The drop, the keyboard steps and the menu all ask it. Moving a component back out of Published is allowed.
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, 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, with the column and the position.
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. React Aria's menu is a group of selectable items, so the column is chosen by selection rather than by a radio item.
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 act for a status change and from put for a move. The names and figures 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.