Fulldev UI

Typography

Automatic prose styling and semantic text primitives for documentation and content-heavy interfaces.

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

npx shadcn@latest add @fulldev/typography

Typeset

Typography uses the recommended shadcn 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.

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.

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.

<Typography as="article">
  <p>This paragraph uses Typeset.</p>

  <div data-not-typeset>
    <YourInteractiveComponent />
  </div>
</Typography>

Child components

The standalone parts render their semantic element with Tailwind classes. They preserve the same size props without depending on a Typography ancestor.

Headings

TypographyH1, TypographyH2, TypographyH3 and TypographyH4 render h1 to h4.

Taxing Laughter: The Joke Tax Chronicles

The People of the Kingdom

The Joke Tax

People stopped telling jokes

TypographyP

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

Read more in the official registry.

TypographyBlockquote

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

TypographyTable

RegionTax rateNotes
North5%Seasonal exemptions apply
South8%Includes performance permits

TypographyList

  • Royal decrees
  • Village announcements
  • Town square gossip

TypographyInlineCode

Use TypographyInlineCode for short code references inside prose.

TypographyLead

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. Give the wrapper tabindex="0", so keyboard users can scroll it.

API Reference

See the GitHub source code for more information on props.