FontWeightToken
A token variant with a weight icon for documenting font weight values.
Overview
FontWeightToken is a specialized variant of the Token component that adds a visual icon to help distinguish font weight values while keeping the tooltip for the exact numeric or named value.
This component implements the fontWeight type from the W3C Design Tokens specification (§8.4), which represents font weights from 1-1000 or named values like "bold" or "normal".
Installation
npx shadcn add @tokenui/font-weight-token
Usage
Use FontWeightToken for font weight 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
FontWeightToken
Prop
Type