Typography
@/components/kamod-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. One day, his advisors came to him with a problem: the kingdom was running out of money.
The King's Plan
The king thought long and hard, and finally came up with a brilliant plan: he would tax the jokes in the kingdom.
"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
The Joke Tax
- 1st level of puns: 5 gold coins
- 2nd level of jokes: 10 gold coins
- 3rd level of one-liners : 20 gold coins
Installation
Import Typography from `@/components/kamod-ui/typography`.
pnpm add @kamod-ch/uiUsage
Use semantic elements via `as` and apply the matching visual variant for consistent hierarchy.
import { Typography } from "@/components/kamod-ui/typography";<Typography />Full Typography Example
Complete example matching shadcn's Typography showcase content.
h1
Top-level page heading style.
Taxing Laughter: The Joke Tax Chronicles
h2
Second-level heading with divider.
The People's Rebellion
h3
Third-level section heading.
The Joke Tax
h4
Fourth-level heading for local sub-sections.
People stopped telling jokes
p
Default body copy for long-form content.
The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.
blockquote
Use for important quoted callouts.
"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
table
Responsive table wrapper with Typography table variant.
| King's Treasury | People's happiness |
|---|---|
| Empty | Overflowing |
| Modest | Satisfied |
| Full | Ecstatic |
list
Bulleted list with consistent spacing.
- 1st level of puns: 5 gold coins
- 2nd level of jokes: 10 gold coins
- 3rd level of one-liners : 20 gold coins
Inline code
Use inline code style for package names and tokens.
@radix-ui/react-alert-dialogLead
Lead copy for section intros.
A modal dialog that interrupts the user with important content and expects a response.
Large
Emphasized short text with large style.
Small
Small helper label text.
Muted
Secondary text for subtle context.
Enter your email address.
API Reference
Props, slots and variants for this component.
Typography
Typography component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| variant | "h1" | "h2" | "h3" | "h4" | "p" | "blockquote" | "code" | "inlineCode" | "list" | "table" | "lead" | "large" | "muted" | "small" | "p" |
| as | keyof HTMLElementTagNameMap | "p" |
| class | string | undefined |
Accessibility Notes
Maintain semantic heading order, avoid skipping heading levels, and ensure muted text still passes contrast requirements in every theme.