sh4dcn
Registries
ActiveDesign system2

@tokenui

Design system · data updated 2026-07-28

A shadcn/ui registry of interactive documentation components for displaying design tokens, aligned with the W3C Design Tokens Community Group specification (2025.10). Implements ColorToken, SpacingToken, RadiusToken, FontFamilyToken, FontWeightToken, DurationToken, NumberToken, ElevationToken, and TypographyToken — covering most core DTCG types. TypeScript-first with full type inference. Built on shadcn/ui, extensible and framework-agnostic for React-based doc sites. Free and open source. Use for: design system documentation pages that need to render live, interactive token swatches and specs following W3C standards.

WebsiteDocsGitHubComponents folderAgent brief (.md)
@tokenui preview
buttonschartscomponentsdesign-systemiconsoverlaystheming

Install

npx shadcn@latest add https://www.tokenui.dev/r/registry.json

Health

StatusActive
Last commit5 months ago
License—
Open issues0
ArchivedNo
Stars2

Components (17)

buttontooltiptokenicon-tokencolor-tokenelevation-tokenduration-tokenspacing-tokentypography-tokenorder-tokenradius-tokenfont-family-tokenfont-weight-tokennumber-tokencolor-swatchcolor-contrastcolor-palette
Components: button, tooltip, token, icon-token, color-token, elevation-token, duration-token, spacing-token, typography-token, order-token, radius-token, font-family-token, font-weight-token, number-token, color-swatch, color-contrast, color-palette

Preview

Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.

@tokenui · button

npx shadcn@latest add https://www.tokenui.dev/r/button.json
View source