Skip to content

Typography

Pick a role, not a size. A heading's level and its size are set separately.

Sourcecomponents/typography.tsx

Display, as an h3

H1 size, as an h3

H3

H4

A lead paragraph introduces a page or section.

Body text for reading. Inline code like pnpm verify uses the mono family.

Muted, for secondary text.

Metadata · Updated 2 hours ago

“Decide it once, and let the agent follow it.”
  • Unordered list item
  • Another item

Prose (styles HTML you don't control)

Release notes

This release adds InputOTP and fixes a focus bug.

  • Faster sync
  • Smaller bundle

Usage

Typography usage
import { Heading, InlineCode, List, Text } from "@/components/typography";
export function TypographyUsage() {  return (    <article className="flex flex-col gap-4">      <Heading level={2} size="h1">        Release notes      </Heading>      <Text variant="lead">What changed in October.</Text>      <List>        <li>Faster search</li>        <li>          A new <InlineCode>size</InlineCode> prop on Sidebar        </li>      </List>    </article>  );}

When to use

Use when

Headings (level and size set separately), Text variants, lists, quotes, inline code; Prose for HTML you don't control

Don’t use when

Inventing sizes; choosing a heading level for its look