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.
---
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'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
npx shadcn@latest add @fulldev/typographyTypeset
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
codeand 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.
---
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>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.
TypographyH1
Taxing Laughter: The Joke Tax Chronicles
---
import { TypographyH1 } from "@/components/ui/typography"
---
<TypographyH1>Taxing Laughter: The Joke Tax Chronicles</TypographyH1>TypographyH2
The People of the Kingdom
---
import { TypographyH2 } from "@/components/ui/typography"
---
<TypographyH2>The People of the Kingdom</TypographyH2>TypographyH3
The Joke Tax
---
import { TypographyH3 } from "@/components/ui/typography"
---
<TypographyH3>The Joke Tax</TypographyH3>TypographyH4
People stopped telling jokes
---
import { TypographyH4 } from "@/components/ui/typography"
---
<TypographyH4>People stopped telling jokes</TypographyH4>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.
---
import { TypographyP } from "@/components/ui/typography"
---
<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.
</TypographyP>TypographyA
Read more in the official registry .
---
import { TypographyA, TypographyP } from "@/components/ui/typography"
---
<TypographyP>
Read more in the <TypographyA href="/docs">official registry</TypographyA>.
</TypographyP>TypographyBlockquote
"After all," he said, "everyone enjoys a good joke, so it's only fair that they pay for the privilege."
---
import { TypographyBlockquote } from "@/components/ui/typography"
---
<TypographyBlockquote>
"After all," he said, "everyone enjoys a good joke, so
it's only fair that they pay for the privilege."
</TypographyBlockquote>TypographyTable
| Region | Tax rate | Notes |
|---|---|---|
| North | 5% | Seasonal exemptions apply |
| South | 8% | Includes performance permits |
---
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
- Royal decrees
- Village announcements
- Town square gossip
---
import { TypographyList, TypographyListItem } from "@/components/ui/typography"
---
<TypographyList>
<TypographyListItem>Royal decrees</TypographyListItem>
<TypographyListItem>Village announcements</TypographyListItem>
<TypographyListItem>Town square gossip</TypographyListItem>
</TypographyList>TypographyInlineCode
Use TypographyInlineCode for short
code references inside prose.
---
import { TypographyInlineCode, TypographyP } from "@/components/ui/typography"
---
<TypographyP>
Use <TypographyInlineCode>TypographyInlineCode</TypographyInlineCode> for short
code references inside prose.
</TypographyP>TypographyLead
A full set of semantic text primitives for documentation, marketing copy, and editorial layouts.
---
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
Typographywhen 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 for more information on props.