shadcn.io is not affiliated with official shadcn/ui
Theme Token Tracker Kanban Block for Solid
A three-column tracker of eight design token changes, where each card draws a swatch row of its tokens before and after the change and a change can't reach Applied without a test.
Installation
Overview
Track changes to a design system's tokens with this board for Solid with Ark UI. A hairline frame with a plus mark on each corner holds three columns that share their lines (Proposed, Testing and Applied) and eight changes. Each card draws a row of small swatches, one for every token the change touches, painted with the theme's own tokens, so the block never changes your theme, and it writes the token names beside them. The "Show after" Button swaps the row between the tokens before the change and the tokens after it, and an applied change is locked on "after". A Badge says whether a change covers Light, Dark or both themes. A change can't reach Applied without passing Testing, and the refusal says which change and where it is. Every column head counts its changes and how many cover both themes, 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 system teams, theming work and release notes for tokens.
FAQ
Why are the swatches painted with tokens and not colours?
The swatch row only shows which tokens a change touches, so each chip uses the theme's own background class for that token (bg-card, bg-muted, bg-border and so on) and the names are written beside it. That keeps the block clean in any theme and in dark mode, and it can't drift from your tokens. The list of tokens a chip can use is SWATCHES; add a pair there to draw another.
What stops a change from skipping Testing?
The function refusalOf returns a reason when a change goes to Applied from any column but Testing, and the grip's drop, the keyboard steps and the menu all ask it. The status line says which change, where it is and what to do. Applied changes are also reset to their tokens after the change, by settleCards.
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.
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 put, the one function every finished move goes through, and from act for the before and after swap. 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.