Typography
Comprehensive typography system with headings, text variants, labels, numbers, and more
Made by shadcnInstallation
Usage
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 | 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 |
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.
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-muted-foreground, 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-muted-foreground - Existing code using the deprecated
<Heading>or<Text>→ keeps working; migrate to the utilities
In Context
Semantic HTML elements styled with the text-* utilities, composed into a realistic document.
Deprecated
The Heading (level prop) and Text (variant prop) components from
@/components/redpanda-ui/typography are deprecated and remain exported only
for backward compatibility. Use the utility classes instead —
e.g. text-heading-md in place of <Heading level={3}>, and
text-body text-muted-foreground in place of <Text variant="muted">. New code
must not use them.
Recent changes
- patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested baseline while caret semantics still allow any compatible release within the same major.#133
- minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
- minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
- majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
- minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109