shadcn.io is not affiliated with official shadcn/ui
Design Tokens Carousel Block for Radix UI
A spacing ruler of fourteen tokens that snaps under a fixed marker, with a readout of the token's name, pixels and rems, a sample block at its exact width, a Copy button, and arrow keys, Home and End.
Installation
Overview
Read a scale by sliding it, with this design tokens carousel for React with Radix UI. Tokenlane, a design-token manager, shows its spacing tokens (space-0.5 to space-24) as a ruler: each tick has its number and a bar as wide as the token, and the track centre-snaps under a fixed marker so the tick under the marker is the chosen token. A readout cell at the end names it, gives its pixels and rems, draws a sample block of that exact width and has a Copy Button for its name, and the foot's polite line says it too ("space-6, 24 pixels, 1.5 rem"). The ticks are a roving set of buttons: the arrow keys step one token, Home and End jump to the first and last, and pressing a tick centres it. Seven ticks show from the medium breakpoint and five on a phone, where the readout stacks under the ruler. It is built from Carousel, Copy Button, Button and Guides. The tokens are an example scale, not a spec.
FAQ
How do I use my own scale?
Edit SIZES, the pixel value of each step in order. Names are derived from them (space- plus a quarter of the pixels, so 24 is space-6), the rems are the pixels over sixteen, and the bar widths are scaled against the widest step, so any list of steps works. Change WIDEST if your largest step isn't 96 pixels, and the number of ticks in view with VIEW.
How does the marker work?
The marker is a fixed line over the middle of the track, and every tick snaps to the centre, so scrolling by any means (a drag, a fling, the arrows, a press) ends with one tick under it. The readout and the polite line follow the tick that ends up there, not the ones that pass. The first and last ticks can reach the centre, so the ruler has blank space at both ends. Embla aligns to the centre with its content not contained, so the ends can reach the marker.
How does it work with a keyboard?
Only the chosen tick is in the tab order. The arrow keys move one token (mirrored in a right-to-left layout), Home and End jump to the ends, and focus stays on the chosen tick as it moves. Previous and Next in the foot stay in the tab order at the ends and are marked unavailable instead of disabled.
What does Copy name do?
It puts the token's name (such as space-6) on the real clipboard, and the polite line says "Copied space-6" for a few seconds before it goes back to the token. If the clipboard is refused the button shows a cross.