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/typographyUsage
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.
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>Child components
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.
API Reference
See the GitHub source code for more information on props.