SpacingToken
A token variant with a ruler icon for documenting spacing, padding, and gap values.
Overview
SpacingToken is a specialized variant of the Token component that adds a visual icon to help distinguish spacing-related values while using the same tooltip pattern to reveal the exact measurement.
This component implements the dimension type from the W3C Design Tokens specification (§8.2), which represents distance values with units like px or rem.
Installation
npx shadcn add @tokenui/spacing-token
Usage
Use SpacingToken for spacing, padding, or gap 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
SpacingToken
Prop
Type