Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Typography
description: Automatic prose styling and semantic text primitives for documentation and content-heavy interfaces.
---

```astro live props={{ name: 'typography' }}
---
import {
  Typography,
  TypographyA,
  TypographyInlineCode,
} from "@/components/ui/typography"
---

<Typography>
  <h1>Taxing Laughter: The Joke Tax Chronicles</h1>
  <p data-slot="typography-lead">
    Once upon a time, in a far-off land, there was a very lazy king who spent
    all day lounging on his throne.
  </p>
  <p>
    The royal scribes published the decree in every square and marketplace. You
    can still read the archived notice at
    {" "}
    <TypographyA href="/docs/">the official registry</TypographyA>.
  </p>
  <h2>The King's Plan</h2>
  <p>
    The king's subjects were not amused. One day, the king thought to himself,
    <TypographyInlineCode
      >"I should tax the jokes in the kingdom."</TypographyInlineCode
    >
    And so he did.
  </p>
  <h3>The People Rebel</h3>
  <p>
    At first, everyone enjoyed the clever new tax code. But eventually, the
    people had had enough.
  </p>
  <h4>A Small Exception</h4>
  <p>Court jesters were granted a temporary discount.</p>
  <blockquote>
    “After all,” he said, “everyone enjoys a good joke, so it&apos;s only fair
    that they pay for the privilege.”
  </blockquote>
  <small>Updated 2 days ago</small>
  <p class="text-muted-foreground">This is the punchline.</p>
</Typography>
```

## Installation

```bash
npx shadcn@latest add @fulldev/typography
```

## Usage

Use `Typography` as a wrapper around rendered content, markdown output, or
regular HTML when you want the component to style its children automatically.
Use the individual typography components when you want explicit primitives in a
component example or custom layout.

Every typography component accepts `size="sm"`, `size="default"`, or
`size="lg"`. The default size keeps body text at the base font size.
On the `Typography` wrapper, `size` only scales the wrapper-level heading and
lead styles. Regular child prose such as paragraphs, lists, blockquotes, code,
small text, and tables keeps its normal default size. Use the individual
components' own `size` prop when those elements need to change size.

```ts
import {
  Typography,
  TypographyA,
  TypographyBlockquote,
  TypographyH1,
  TypographyH2,
  TypographyH3,
  TypographyH4,
  TypographyInlineCode,
  TypographyLead,
  TypographyList,
  TypographyListItem,
  TypographyP,
  TypographyTable,
  TypographyTableCell,
  TypographyTableHead,
  TypographyTableRow,
} from "@/components/ui/typography"
```

## Child elements

The `Typography` wrapper styles supported child elements directly. Headings,
paragraphs, links, blockquotes, lists, tables, inline code, and preformatted code
can be regular HTML.

```astro live
---
import { Typography } from "@/components/ui/typography"
---

<Typography>
  <h2>Rendered content</h2>
  <p>
    Drop in regular HTML when the content is generated, copied from markdown, or
    owned by another component. The wrapper applies the expected spacing, type
    scale, and inline styles.
  </p>
  <ul>
    <li>Headings receive the matching type treatment.</li>
    <li>Lists get readable indentation and vertical rhythm.</li>
    <li>
      Inline <code>code</code> and <a href="/components/button/">links</a>
      are styled automatically.
    </li>
  </ul>
  <blockquote>
    The wrapper is useful when the markup is semantic, but the typography should
    stay consistent with the rest of the system.
  </blockquote>
</Typography>
```

## Child components

### TypographyH1

```astro live
---
import { TypographyH1 } from "@/components/ui/typography"
---

<TypographyH1>Taxing Laughter: The Joke Tax Chronicles</TypographyH1>
```

### TypographyH2

```astro live
---
import { TypographyH2 } from "@/components/ui/typography"
---

<TypographyH2>The People of the Kingdom</TypographyH2>
```

### TypographyH3

```astro live
---
import { TypographyH3 } from "@/components/ui/typography"
---

<TypographyH3>The Joke Tax</TypographyH3>
```

### TypographyH4

```astro live
---
import { TypographyH4 } from "@/components/ui/typography"
---

<TypographyH4>People stopped telling jokes</TypographyH4>
```

### TypographyP

```astro live
---
import { TypographyP } from "@/components/ui/typography"
---

<TypographyP>
  The king&apos;s subjects were not amused. One day, the king thought to
  himself, &quot;I should tax the jokes in the kingdom.&quot; And so he did.
</TypographyP>
```

### TypographyA

```astro live
---
import { TypographyA, TypographyP } from "@/components/ui/typography"
---

<TypographyP>
  Read more in the <TypographyA href="/docs/">official registry</TypographyA>.
</TypographyP>
```

### TypographyBlockquote

```astro live
---
import { TypographyBlockquote } from "@/components/ui/typography"
---

<TypographyBlockquote>
  &quot;After all,&quot; he said, &quot;everyone enjoys a good joke, so
  it&apos;s only fair that they pay for the privilege.&quot;
</TypographyBlockquote>
```

### TypographyTable

```astro live
---
import {
  TypographyTable,
  TypographyTableCell,
  TypographyTableHead,
  TypographyTableRow,
} from "@/components/ui/typography"
---

<TypographyTable>
  <thead>
    <TypographyTableRow>
      <TypographyTableHead>Region</TypographyTableHead>
      <TypographyTableHead>Tax rate</TypographyTableHead>
      <TypographyTableHead>Notes</TypographyTableHead>
    </TypographyTableRow>
  </thead>
  <tbody>
    <TypographyTableRow>
      <TypographyTableCell>North</TypographyTableCell>
      <TypographyTableCell>5%</TypographyTableCell>
      <TypographyTableCell>Seasonal exemptions apply</TypographyTableCell>
    </TypographyTableRow>
    <TypographyTableRow>
      <TypographyTableCell>South</TypographyTableCell>
      <TypographyTableCell>8%</TypographyTableCell>
      <TypographyTableCell>Includes performance permits</TypographyTableCell>
    </TypographyTableRow>
  </tbody>
</TypographyTable>
```

### TypographyList

```astro live
---
import { TypographyList, TypographyListItem } from "@/components/ui/typography"
---

<TypographyList>
  <TypographyListItem>Royal decrees</TypographyListItem>
  <TypographyListItem>Village announcements</TypographyListItem>
  <TypographyListItem>Town square gossip</TypographyListItem>
</TypographyList>
```

### TypographyInlineCode

```astro live
---
import { TypographyInlineCode, TypographyP } from "@/components/ui/typography"
---

<TypographyP>
  Use <TypographyInlineCode>TypographyInlineCode</TypographyInlineCode> for short
  code references inside prose.
</TypographyP>
```

### TypographyLead

```astro live
---
import { TypographyLead } from "@/components/ui/typography"
---

<TypographyLead>
  A full set of semantic text primitives for documentation, marketing copy, and
  editorial layouts.
</TypographyLead>
```

## Notes

- Wrap long-form prose in `Typography` when you want sensible defaults for
  headings, paragraphs, lists, tables, and inline code.
- Use the individual typography primitives when you want explicit semantic
  composition inside a component example or a custom layout.

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/typography) for more information on props.