Token
A component for displaying name/value pairs as interactive tooltips. Serves as the base primitive for specialized token variants.
Overview
Token is a general-purpose component for displaying any name–value pair as a tooltip. It provides the foundation for more specialized token components like ColorToken, while remaining flexible enough to be extended or composed for custom documentation requirements.
Installation
npx shadcn add @tokenui/token
Usage
Use the Token component to document any design token. The token name appears as a button, and hovering reveals the value. Clicking the token name copies it to the clipboard:
Copy to Clipboard
By default, clicking a token name copies it to the clipboard. Feel free to disable this behavior by setting copyable={false}:
Composition
The Token component provides three levels of abstraction, letting you choose the right balance between convenience and control:
Pre-Composed
An opinionated, ready-to-use component with sensible defaults. Perfect for common cases where you don't need custom composition.
Custom Trigger
Use when you need to customize the trigger content with badges, labels, or semantic UI elements while keeping the standard tooltip behavior.
For visual indicators that display the token's value (like color swatches), you can use TokenIndicator instead.
Primitives
Maximum flexibility for advanced use cases. Compose primitives directly when you need custom tooltip content, non-standard interactions, or integration with other components.
This example shows a spacing token with a custom-styled tooltip and visual preview—something you can't achieve with the pre-composed components:
API Reference
BasicToken
A fully composed token component with sensible defaults. Composes Token with TokenName to provide a button with copy functionality and value tooltip. This is the recommended starting point.
Prop
Type
Token
Mid-level composition that accepts custom children as the tooltip trigger. Composes TokenProvider, TokenRoot, and TokenValue. Use when you need to customize the trigger beyond the basic button.
Prop
Type
TokenProvider
Context provider that makes token name and value available to all child components.
Prop
Type
TokenRoot
Provides the tooltip functionality. Composes Tooltip from shadcn/ui.
TokenName
Button trigger that displays the token name and copies it to the clipboard on click. Reads the name from TokenProvider context. Composes TooltipTrigger from shadcn/ui.
Prop
Type
TokenValue
Tooltip content wrapper with default spacing. Can display the token value or accept custom children for richer content. Reads the value from TokenProvider context. Composes TooltipContent from shadcn/ui.
TokenName
Button trigger that displays the token name and copies it to the clipboard on click. Reads the name from TokenProvider context. Composes TooltipTrigger from shadcn/ui.
Prop
Type
TokenValue
Tooltip content wrapper with default spacing. Can display the token value or accept custom children for richer content. Reads the value from TokenProvider context. Composes TooltipContent from shadcn/ui.
TokenIndicator
A context-aware visual indicator that displays the token value as a background color. Reads the value from TokenProvider context.
Customize the indicator's shape and add custom children: