Typography
Comprehensive typography system with headings, text variants, labels, numbers, and more
Installation
npx shadcn@latest add @redpanda/typographypnpm dlx shadcn@latest add @redpanda/typographyyarn dlx shadcn@latest add @redpanda/typographybunx shadcn@latest add @redpanda/typographynubx shadcn@latest add @redpanda/typographyaube dlx shadcn@latest add @redpanda/typographyUsage
Apply type styles with text-* utility classes. Each class carries the full style — size, line-height, weight and tracking — on its own, and works on any element. This is the recommended approach.
<h1 className="text-heading-xl">Page title</h1><p className="text-lead">Intro paragraph under the title.</p><p className="text-body">Body copy for the page.</p><td className="text-caption">PARTITION</td><span className="text-body tabular-nums">1,284,905</span>Type Scale
Every style is a single text-* utility. Compose freely with color, alignment, and other utilities.
| Utility | Style | Size · line-height | Weight |
|---|---|---|---|
text-heading-xl – text-heading-xs |
Headings (InterDisplay) | 24 → 14px · leading-tight |
500 |
text-lead |
Lead / intro paragraph | 18px · leading-normal |
400 |
text-body-lg |
Body, one step up | 16px · leading-normal |
400 |
text-body |
Body / paragraph (default) | 14px · leading-normal |
400 |
text-label |
Form & UI labels | 14px · leading-snug |
500 |
text-body-sm |
Small / helper text | 12px · leading-snug |
400 |
text-caption |
Caption / meta | 10px · leading-snug |
400 |
text-overline |
Overline / eyebrow above a title or value (uppercase) | 14px · leading-snug |
600 |
text-overline-sm |
Overline, one step down | 12px · leading-snug |
600 |
Line-heights use Tailwind’s leading scale — leading-tight (1.25), leading-snug (1.375), leading-normal (1.5) — so they read as intentional steps, not magic numbers.
Size suffixes step relative to text-body, the 14px anchor — they do not name the Tailwind rung underneath, so text-body-sm is built on the xs rung and text-body-lg on base. Body sits at 14px because this is dense application UI rather than long-form prose, and that single choice is what offsets the two scales. text-lead stays a role rather than a size step: reach for it on a lede under a title, and for text-body-lg when you want body copy one notch roomier.
Both overline rungs uppercase in CSS rather than in the string, so your source copy and the accessible
name stay in sentence case. They are the eyebrow half of a label-over-value row; for the value half,
compose font-mono onto a size (font-mono text-body) — monospace is a family, not a step on this scale.
Each token bundles the type identity — size, line-height and tracking. Weight and color stay composable: for emphasis use text-body font-medium, and for muted text text-body text-subtle, rather than dedicated tokens. For a raw size with no weight or tracking, use Tailwind’s own scale (text-xs … text-5xl), including text-2xs (10px) for dense tables and meta rows. For aligned numeric columns, compose tabular-nums onto any text style (e.g. text-body tabular-nums).
Other Elements
Structural and inline elements that pair with the type scale.
Choosing the Right Approach
- Any text style → apply the matching
text-*utility to your element (recommended) - Raw size only, no weight or tracking → Tailwind’s
text-xs…text-5xl(ortext-2xsfor 10px) - Numerical data → your text style +
tabular-numsfor aligned figures (e.g.text-body tabular-nums) - Muted / secondary text →
text-body text-subtle - Existing code using
<Heading>or<Text>→ migrate to semantic HTML and utilities before updating
In Context
Semantic HTML elements styled with the text-* utilities, composed into a realistic document.