@tokenui

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.

17 components react shadcn-cli

website ↗ github ↗ registry ↗

Install this registry

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

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

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

fetch registry curl -s https://www.tokenui.dev/r/registry.json

Components

17 total

Button ui

A button component with multiple variants and sizes.

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

Tooltip ui

A tooltip component for displaying contextual information.

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

Token component

A tooltip-based component for documenting design tokens. Includes TokenIndicator for visual value display.

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

BaseIconToken component

A base token variant that renders an icon next to the token name; use it to build custom icon tokens.

npx shadcn@latest add https://www.tokenui.dev/r/icon-token.json

ColorToken component

A specialized component for documenting color tokens.

npx shadcn@latest add https://www.tokenui.dev/r/color-token.json

ElevationToken component

A token variant with a layers icon for elevation and shadow values.

npx shadcn@latest add https://www.tokenui.dev/r/elevation-token.json

DurationToken component

A token variant with a timer icon for animation or transition durations.

npx shadcn@latest add https://www.tokenui.dev/r/duration-token.json

SpacingToken component

A token variant with a ruler icon for spacing, padding, and gap values.

npx shadcn@latest add https://www.tokenui.dev/r/spacing-token.json

TypographyToken component

A token variant with a typography icon for font, size, and line-height values.

npx shadcn@latest add https://www.tokenui.dev/r/typography-token.json

OrderToken component

A token variant with a layers-2 icon for z-index and stacking contexts.

npx shadcn@latest add https://www.tokenui.dev/r/order-token.json

RadiusToken component

A token variant with a spline icon for border radius values.

npx shadcn@latest add https://www.tokenui.dev/r/radius-token.json

FontFamilyToken component

A token variant with a type icon for font family values.

npx shadcn@latest add https://www.tokenui.dev/r/font-family-token.json

FontWeightToken component

A token variant with a weight icon for font weight values.

npx shadcn@latest add https://www.tokenui.dev/r/font-weight-token.json

NumberToken component

A token variant with a hash icon for numeric values like line-height.

npx shadcn@latest add https://www.tokenui.dev/r/number-token.json

ColorSwatch component

A primitive component for displaying a single color swatch with an optional hover label.

npx shadcn@latest add https://www.tokenui.dev/r/color-swatch.json

ColorContrast component

A component for displaying accessibility contrast algorithms visually inline, natively hooking into ColorSwatch.

npx shadcn@latest add https://www.tokenui.dev/r/color-contrast.json

ColorPalette component

A component for displaying color collections including ramps, scales, and palettes

npx shadcn@latest add https://www.tokenui.dev/r/color-palette.json