DurationToken
A token variant with a timer icon for documenting animation and transition durations.
Overview
DurationToken is a specialized variant of the Token component that adds a visual icon to help distinguish motion timing values while preserving the familiar tooltip for inspecting the exact duration.
This component implements the duration type from the W3C Design Tokens specification (§8.5), which represents time values with units like ms or s.
Installation
npx shadcn add @tokenui/duration-token
Usage
Use DurationToken for animation or transition durations:
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
DurationToken
Prop
Type