Introduction

What is Token UI?

Design systems are the backbone of modern product development. Token UI is a component library and custom registry that helps teams document, visualize, and maintain design tokens alongside their design system documentation.

Token UI builds on the shadcn/ui ecosystem. Components are created on top of shadcn/ui and distributed using its registry model, making them easy to install, inspect, and adapt within existing projects.

Because the components are written in React, Token UI can be used wherever React-based documentation is supported. This includes custom documentation sites, documentation frameworks like Fumadocs and Nextra, as well as MDX-based environments such as Storybook.

Like shadcn/ui, Token UI provides the actual component code rather than a compiled package. This means the components are fully owned by your project and can be customized as needed. The examples shown in the documentation use an opinionated setup inspired by common design system patterns, but layouts, styling, and composition can be adjusted to suit different design languages and documentation needs.

Inspired by W3C Standards

Token UI is inspired by and strives to align with the W3C Design Tokens Community Group specification (2025.10). Following these standards helps ensure better compatibility with industry-standard design token tools and workflows, adding credibility to your design system.

Spec-Aligned Token Types

We support all core token types defined in the DTCG specification:

Core Types (§8): color, dimension, fontFamily, fontWeight, duration, cubicBezier, number
Composite Types (§9): typography, shadow, border, transition, gradient, strokeStyle

Extensions & Innovations

Token UI extends the specification with practical patterns:

OrderToken — For z-index and stacking contexts (not yet standardized)
Visual Documentation — Interactive tooltips and indicators for better developer experience
Type Safety — TypeScript-first design with full type inference

Interoperability

Your tokens work with spec-compliant tools:

✅ Style Dictionary
✅ Terrazzo
✅ Figma Tokens Studio
✅ Any tool following the Design Tokens Format Module

Learn more in our DTCG Specification guide.