NumberToken
A token variant with a hash icon for documenting numeric values like line-height and opacity.
Overview
NumberToken is a specialized variant of the Token component that adds a visual icon to help distinguish numeric values while keeping the tooltip for the exact number.
This component implements the number type from the W3C Design Tokens specification (§8.7), which represents unitless numeric values like line-height multipliers, opacity, or gradient stop positions.
Installation
npx shadcn add @tokenui/number-token
Usage
Use NumberToken for unitless numeric values:
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
NumberToken
Prop
Type