--- type: doc title: Typography description: Automatic prose styling and semantic text primitives for documentation and content-heavy interfaces. --- > Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md). ```astro live props={{ name: 'typography' }} --- import { Typography, TypographyA, TypographyInlineCode, } from "@/components/ui/typography" ---

Taxing Laughter: The Joke Tax Chronicles

Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne.

The royal scribes published the decree in every square and marketplace. You can still read the archived notice at{" "} the official registry.

The King's Plan

The king's subjects were not amused. One day, the king thought to himself,{" "} "I should tax the jokes in the kingdom." {" "} And so he did.

The People Rebel

At first, everyone enjoyed the clever new tax code. But eventually, the people had had enough.

A Small Exception

Court jesters were granted a temporary discount.

“After all,” he said, “everyone enjoys a good joke, so it's only fair that they pay for the privilege.”

Updated 2 days ago

This is the punchline.

``` ## Installation ```bash npx shadcn@latest add @fulldev/typography ``` ## Typeset `Typography` uses the recommended [shadcn Typeset](https://ui.shadcn.com/docs/typeset) stylesheet. Typeset applies one readable scale and vertical rhythm to semantic HTML, including headings, paragraphs, links, lists, code, blockquotes, media, and tables. It also supports task lists, footnotes, definition lists, keyboard keys, and print styles. ## 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"`. On `Typography`, the size preset changes the body size, line height, and flow spacing together so the whole document keeps a consistent rhythm. The default preset uses a `1rem` body size, `1.75` line height, and `1.25em` flow spacing. Use the individual components' size prop when a standalone element needs a different 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 props={{ name: 'typography' }} --- import { Typography } from "@/components/ui/typography" ---

Rendered content

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.

Headings receive the matching type treatment.
Lists get readable indentation and vertical rhythm.
Inline code and links are styled automatically.

The wrapper is useful when the markup is semantic, but the typography should stay consistent with the rest of the system.

``` ## Opt out Add `data-not-typeset` or `class="not-typeset"` to an embedded interface that should keep its component styles. The opt-out includes every descendant, so put it on the smallest wrapper that owns the interface. A nested `Typography` cannot reactivate Typeset inside an opted-out subtree. ```astro

This paragraph uses Typeset.

``` ## Child components The standalone parts render their semantic element with Tailwind classes. They preserve the same `size` props without depending on a `Typography` ancestor. ### TypographyH1 ```astro live --- import { TypographyH1 } from "@/components/ui/typography" --- Taxing Laughter: The Joke Tax Chronicles ``` ### TypographyH2 ```astro live --- import { TypographyH2 } from "@/components/ui/typography" --- The People of the Kingdom ``` ### TypographyH3 ```astro live --- import { TypographyH3 } from "@/components/ui/typography" --- The Joke Tax ``` ### TypographyH4 ```astro live --- import { TypographyH4 } from "@/components/ui/typography" --- People stopped telling jokes ``` ### TypographyP ```astro live --- import { TypographyP } from "@/components/ui/typography" --- The king's subjects were not amused. One day, the king thought to himself, "I should tax the jokes in the kingdom." And so he did. ``` ### TypographyA ```astro live --- import { TypographyA, TypographyP } from "@/components/ui/typography" --- Read more in the official registry. ``` ### TypographyBlockquote ```astro live --- import { TypographyBlockquote } from "@/components/ui/typography" --- "After all," he said, "everyone enjoys a good joke, so it's only fair that they pay for the privilege." ``` ### TypographyTable ```astro live --- import { TypographyTable, TypographyTableCell, TypographyTableHead, TypographyTableRow, } from "@/components/ui/typography" --- Region Tax rate Notes North 5% Seasonal exemptions apply South 8% Includes performance permits ``` ### TypographyList ```astro live --- import { TypographyList, TypographyListItem } from "@/components/ui/typography" --- Royal decrees Village announcements Town square gossip ``` ### TypographyInlineCode ```astro live --- import { TypographyInlineCode, TypographyP } from "@/components/ui/typography" --- Use TypographyInlineCode for short code references inside prose. ``` ### TypographyLead ```astro live --- import { TypographyLead } from "@/components/ui/typography" --- A full set of semantic text primitives for documentation, marketing copy, and editorial layouts. ``` ## 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. - Wrap wide tables or other wide content in `class="typeset-scroll"` to retain native table semantics with horizontal overflow. ## API Reference See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/typography) for more information on props.