ColorToken
A specialized component for documenting color tokens in design systems with visual color swatches.
Overview
ColorToken is a specialized variant of the Token component designed specifically for documenting color values in your Design System. It displays a color swatch indicator next to the token name, making it easy to visually identify and reference colors while still maintaining the same interactive tooltip behavior for value display.
This component implements the color type from the W3C Design Tokens specification (§8.1).
Installation
npx shadcn add @tokenui/color-token
Usage
Use the ColorToken component to document color tokens. Each token displays with a circular color swatch that visually represents the color value:
Want your own variant?
Check the source for this component and the bundled BaseIconToken to mirror the Token → TokenName → TokenIndicator pattern when you create your own icon-based token components.
API Reference
ColorToken
Prop
Type