shadcn.io is not affiliated with official shadcn/ui
Token Collections Grid Integration Block for Ark UI
An integration grid section for a design-docs tool connected to Figma: four variable collections (Colour, Type, Radius, Spacing) on shared hairlines, each with a mode switch that redraws its greyscale sample and a switch for syncing it to a tokens file, with a live tally.
Installation
Overview
An integration grid section for React with Ark UI, written for Framenote, a fictional tool that keeps design docs in step with a Figma file, and its Figma connection. A start-aligned header says which collections become tokens, with one sentence and a polite tally line ("3 of 4 collections sync to tokens.json, 41 variables"), and at its end the mark pair (Framenote's own tile and Figma's neutral lettermark tile, joined by a connector). Under a band rule, four cells share hairlines, two across from sm: Colour, Type, Radius and Spacing, each a Figma variable collection with its variable count. Every cell draws a greyscale sample of its values and has a segmented control for its two modes: Light and Dark redraw a five-step grey ramp on an inverted surface, Comfortable and Compact change the type scale, Rounded and Square change the corner radii, and Roomy and Dense change the spacing steps. A switch at the foot of each cell turns the collection's sync to the code file on or off, and the tally is counted from the cells that are on. Nothing is written in the demo, and the line says so. On a phone the cells stack in one column. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides, Segment Group and Switch, with CSS transitions and your theme's tokens for every colour. Figma is named in text only: no Figma logo, colour or wordmark ships with the block. The collections, values and counts are example data.
FAQ
What does the mode control do?
A Figma variable collection can hold several modes, each with its own values for the same variables. The control in each cell picks one of two, and the sample redraws with that mode's values: the Light and Dark samples show the same five grey steps swapped between a light and an inverted surface, the type samples change sizes and line heights, the radius samples change the corners, and the spacing samples change the bar widths. The modes are named per collection in COLLECTIONS, which is how Figma names them too. The sample is a drawing; it does not read your file.
How is the tally worked out?
The collections that are switched on live in one array of ids. The line is built from it: how many are on, out of how many, and the sum of their variables counts. It sits in a polite status region that is in the page from the start, so a screen reader hears the new tally after each switch. Changing a mode never changes the tally, and nothing is written to a file or sent anywhere.
Can this read my Figma variables?
Not by itself: the block is a front end with example data. Reading variables through Figma's REST API needs the file_variables:read scope, and Figma offers that API on Enterprise plans only, so a real product should say so on its connect step. Replace COLLECTIONS with your file's collections and keep the switches wired to your own settings.
Can I show Figma's logo?
The block names Figma in text and ships no Figma logo, colour or wordmark. Figma's tile is a neutral lettermark, Fg in a muted square, in an icon slot that a code comment marks: drop in the official mark only if you have the rights to use it, under the owner's brand guidelines, and never redraw it.
How do I wire the switches?
Each cell's onSync receives the new state; keep your own list of synced collections in place of the demo's, and write it where your product stores settings.
The switch is controlled with checked and onCheckedChange, which receives the details.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
Below sm the four cells stack in one column and the mode control wraps under the collection's name. In a right-to-left layout the cells and controls flip while the samples keep their numbers left to right. The mode and sample changes are short transitions that are off with reduced motion, and the header fades up once on load; with reduced motion it simply appears.