build69
Sign inGet API key
build69  /  Components  /  Layout & Surfaces  /  Typography

Typography

v1.0.1Updated 20 Jul 2026

Themed typography component with a 15-step type ramp (display-2xl down to caption-xs), tones, alignment, weight, truncate, and line-clamp helpers.

View source← Back to catalog

Preview

Live · 8 stories
All VariantsOpen ↗
▸Why this is recommendedtypographytextheadingcontent+3

Every Typography variant lined up for comparison.

Recommended for+14
  • ✓Headings, body, captions in any composed surface
  • ✓Marketing copy
  • ✓Replacing raw <h1>/<p> for consistent ramp
Tags+6
typographytextheadingcontenttruncateallvariants
Features+4
  • 15 variants from display-2xl to caption-xs
  • Tones (default / muted / primary / success / warning / destructive)
  • Alignment + weight overrides
  • Truncate (1-line ellipsis) + lineClamp (n-lines clamp)
  • Semantic element override (as)
Not recommended for−2
  • ✕Raw markdown bodies (use Markdown)
  • ✕Inline labels for inputs (use Label)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Typography" })

Usage

import { Typography } from '@/components/primitives/typography';

<Typography variant="heading-lg" as="h2">Revenue</Typography>
<Typography variant="body-md" tone="muted">Last 30 days</Typography>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
variant

Ramp variant (e.g. heading-lg, body-md, caption-sm)

string—
tone

Colour tone

string—
align

Text alignment

'left' | 'center' | 'right'—
weight

Font weight override

number | string—
truncate

1-line ellipsis

boolean—
lineClamp

Clamp to N lines

number—
as

Semantic element override

ElementType—

Every tonal component shares the same tone × emphasis API, so the pair looks identical across Button, Badge, Alert and more.

Related

Platform docsAll componentsSource files