shadcn.io is not affiliated with official shadcn/ui
Color Token Grid Gallery Block for Svelte
Twelve of the theme's own colour tokens as swatches on shared hairlines, each with its name and its painted value in the format you choose, and a Copy button that copies exactly that text.
Installation
Overview
A token palette for Svelte with Ark UI. A header with a Format control at its end (Token, OKLCH, RGB or Hex) sits over twelve swatches on shared hairlines, six across on a wide screen, four on a tablet and three on a phone, ending the block. Every swatch is painted by the real token (bg-background, bg-primary, bg-border and so on), so the grid follows whichever theme the page wears, light, dark or yours. After the page mounts, the block reads what the browser actually paints for each swatch and shows it in the chosen format; when the theme changes it reads again. Until then, and under Token, each swatch shows its variable name. The Copy button on a swatch copies the text under it (a token name as var(--name), ready to paste) and says what it copied. The chrome around the swatches is neutral; the colour lives in the swatches, and every one carries its value in words. It's built from Guides, ToggleGroup and CopyButton. For design-token docs, theme pages and handoff notes.
FAQ
Where do the OKLCH, RGB and Hex values come from?
From the page itself. After mount the block reads each swatch's computed background colour, draws it onto one canvas pixel so any colour syntax (oklch, color-mix, hex) turns into sRGB bytes, and prints those bytes as RGB and Hex and converts them to OKLCH. A token defined in a wider colour space shows its nearest sRGB value.
What happens when I switch the theme?
The swatches repaint at once because they use the tokens, and the block watches the page's root element for a changed class, style or theme attribute and reads the values again, so the text stays true in light and dark.
What does the Copy button copy?
The text shown under the swatch in the current format, such as var(--primary) (under Token, which shows --primary), oklch(0.205 0 0), rgb(24 24 27) or #18181b. The button changes to a check and a screen reader hears what was copied. If the browser refuses the clipboard, the button shows a cross and says so.
Why does it show var(--token) first?
The server cannot know what the browser will paint, so the first render shows the token names (--primary) and the values arrive a moment after mount. Under the Token format the names are what you want anyway.