Typography
Single variant-driven primitive covering headings, prose, inline code, lists, and blockquotes. Renders the semantic tag per variant; override with the `as` prop when you need a different element.
H1
Designing with clarity
<Typography variant="h1">Designing with clarity</Typography>H2
Principles of type
<Typography variant="h2">Principles of type</Typography>H3
Hierarchy and scale
<Typography variant="h3">Hierarchy and scale</Typography>H4
Supporting headings
<Typography variant="h4">Supporting headings</Typography>Paragraph
Every primitive ships with covered states, reduced-motion fallbacks, and both themes out of the box. Typography inherits the Geist Variable stack.
<Typography variant="p">
Every primitive ships with covered states, reduced-motion fallbacks,
and both themes out of the box. Typography inherits the Geist Variable stack.
</Typography>Blockquote
"Motion as information — transitions make state changes legible, nothing moves for decoration."
<Typography variant="blockquote">
"Motion as information — transitions make state changes legible, nothing moves for decoration."
</Typography>Table
| Primitive | Tag | Variant |
|---|---|---|
| Heading 1 | h1 | h1 |
| Paragraph | p | p |
| Inline code | code | code |
<div class="w-full overflow-auto">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-border">
<th class="pb-2 text-left font-medium">Primitive</th>
<th class="pb-2 text-left font-medium">Tag</th>
<th class="pb-2 text-left font-medium">Variant</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border">
<td class="py-2">Heading 1</td>
<td class="py-2 font-mono text-xs">h1</td>
<td class="py-2">h1</td>
</tr>
<tr class="border-b border-border">
<td class="py-2">Paragraph</td>
<td class="py-2 font-mono text-xs">p</td>
<td class="py-2">p</td>
</tr>
<tr>
<td class="py-2">Inline code</td>
<td class="py-2 font-mono text-xs">code</td>
<td class="py-2">code</td>
</tr>
</tbody>
</table>
</div>List
- Reduced-motion first
- Tokens over literals
- Both themes, always
<Typography variant="list">
<li>Reduced-motion first</li>
<li>Tokens over literals</li>
<li>Both themes, always</li>
</Typography>Inline code
Wrap identifiers with useState() — a lightweight
inline affordance for keywords, paths, and CLI fragments.
<Typography variant="p">
Wrap identifiers with <Typography variant="code" as="code">useState()</Typography> — a lightweight
inline affordance for keywords, paths, and CLI fragments.
</Typography>Lead
A library of Svelte-native primitives, built on hex design tokens.
<Typography variant="lead">
A library of Svelte-native primitives, built on hex design tokens.
</Typography>Large
Large text for quiet emphasis.
<Typography variant="large">Large text for quiet emphasis.</Typography>Small
<Typography variant="small">Small, for footnotes and captions.</Typography>Muted
Muted, for supporting copy and metadata.
<Typography variant="muted">Muted, for supporting copy and metadata.</Typography>Link
Inline link with a 1px underline at offset-4. On hover,
Geist's variable weight axis tweens 500 → 600 over --motion-duration-fast; reduced-motion zeroes the
duration automatically.
Visit the tokens reference to see the token palette in full.
<Typography variant="p">
Visit the
<Typography variant="link" as="a" href="#tokens">tokens reference</Typography>
to see the token palette in full.
</Typography>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'blockquote' | 'lead' | 'large' | 'small' | 'muted' | 'code' | 'list' | 'link' | 'p' | Chooses both the visual style and the default semantic tag. | |
keyof HTMLElementTagNameMap | — | Override the rendered element. Useful for inline `code` inside a paragraph, or rendering a heading as a link. | |
string | — | Merged onto the root via tailwind-merge. | |
HTMLElement | null | null | Two-way-bindable element reference. |