shadcn.io is not affiliated with official shadcn/ui
Design System Component Kanban Block for Radix UI
A three-column tracker of ten components with four platform tags and a count of platform coverage, where a component needs three of four platforms before it can be Released.
Installation
Overview
Track a design system across its platforms with this component board for React with Radix UI. A hairline frame with a plus mark on each corner holds three columns that share their lines (Proposed, Building and Released) and ten components. Each card shows the component's name, its kind in an outline Badge and its platform coverage: four tags for Web, iOS, Android and Figma, filled where the platform has the component and outlined where it doesn't, with the count in words ("3 of 4 platforms"). A component that isn't everywhere has a Button that adds the next platform, which is how coverage grows. Each column head counts its platform builds, and the sentence under the heading is worked out from the cards. A card moves three ways: drag it by its grip, press Space on the grip and use the arrow keys, or open its Dropdown Menu and choose a column under "Move to". One rule guards the board: a component needs three of the four platforms before it can be Released, and the refusal says how many are missing. A polite status line in the foot reports each change, 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 design-system teams, component libraries and any rollout across more than one platform.
FAQ
How do I fill it with my own components and platforms?
Edit PLATFORMS, COLUMNS and START. A card has an id, the column it starts in, a title, a kind and covered, how many of the platforms have it, counted in the order of PLATFORMS. Set NEEDED to the count a component needs before it is Released. The tags, the counts and the header are calculated from the cards.
How are the platform tags read by a screen reader?
Each tag is a list item whose text is the platform plus "built" or "not built", so the card reads as a list of four and the count below it gives the total. The fill is never the only signal: a missing platform also has a dashed outline and a different text colour.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with its 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.
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 Released rule work, and how do I change it?
The rule is the function refusalOf, which gets the cards, the component, 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 component where it was and the status line says how many platforms it still needs. Replace the body with your own rule, such as requiring Web and Figma.
What stays in the demo, and how do I save the changes?
Everything: the moves and the coverage 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 (every finished move goes through it) and from act (the add button), and update the cards from the response. The components are generic names.
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.