---
name: "@tokenui"
slug: "tokenui"
description: "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."
category: "Design system"
tags: ["buttons", "charts", "components", "design-system", "icons", "overlays", "theming"]
framework: "react"
license: null
author: "gmlnchv"
website: "https://www.tokenui.dev"
github: "https://github.com/gmlnchv/token-ui"
registry: "https://www.tokenui.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 2
component_count: 17
generated_at: "2026-07-28T08:00:50.948Z"
---

# @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.

## Links

- Website: https://www.tokenui.dev
- GitHub: https://github.com/gmlnchv/token-ui
- Registry JSON: https://www.tokenui.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/tokenui
- This file: https://sh4dcn.vercel.app/md/tokenui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.tokenui.dev/r/registry.json
pnpm dlx shadcn@latest add https://www.tokenui.dev/r/registry.json
bunx shadcn@latest add https://www.tokenui.dev/r/registry.json
# clone the source repo
git clone https://github.com/gmlnchv/token-ui.git
# fetch the raw registry index
curl -s https://www.tokenui.dev/r/registry.json
```

## Components (17)

| name | type | description | install |
| --- | --- | --- | --- |
| button | registry:ui | A button component with multiple variants and sizes. | `npx shadcn@latest add https://www.tokenui.dev/r/button.json` |
| tooltip | registry:ui | A tooltip component for displaying contextual information. | `npx shadcn@latest add https://www.tokenui.dev/r/tooltip.json` |
| token | registry: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` |
| icon-token | registry: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` |
| color-token | registry:component | A specialized component for documenting color tokens. | `npx shadcn@latest add https://www.tokenui.dev/r/color-token.json` |
| elevation-token | registry: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` |
| duration-token | registry: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` |
| spacing-token | registry: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` |
| typography-token | registry: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` |
| order-token | registry: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` |
| radius-token | registry:component | A token variant with a spline icon for border radius values. | `npx shadcn@latest add https://www.tokenui.dev/r/radius-token.json` |
| font-family-token | registry: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` |
| font-weight-token | registry: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` |
| number-token | registry: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` |
| color-swatch | registry: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` |
| color-contrast | registry: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` |
| color-palette | registry:component | A component for displaying color collections including ramps, scales, and palettes | `npx shadcn@latest add https://www.tokenui.dev/r/color-palette.json` |

## For AI agents

```text
You are adding components from @tokenui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/tokenui.md) for the component list.
2. Fetch the machine-readable index: https://www.tokenui.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: tokenui).
```