TypographyToken

A token variant with a typography icon for documenting fonts, sizes, and line heights.

Overview

TypographyToken is a specialized variant of the Token component that adds a visual icon to help distinguish font-related tokens while keeping the tooltip for precise specs.

This component implements the typography composite type from the W3C Design Tokens specification (§9.8), which represents typographic styles including font family, size, weight, line height, and letter spacing.

Installation

npx shadcn add @tokenui/typography-token

Usage

Use TypographyToken for typeface, size, and line-height 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