Canonical class recipes for headings, paragraphs, blockquotes, tables, lists, and inline text, matching the shadcn/ui typography conventions used throughout this site.

Typography Examples

Headings

Taxing Laughter: The Joke Tax Chronicles

The People of the Kingdom

The Joke Tax

People stopped telling jokes

Paragraph

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.

Blockquote

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

Table

King's Treasury	People's Happiness
Empty	Overflowing
Modest	Satisfied

List

1st level of puns: 5 gold coins
2nd level of jokes: 10 gold coins
3rd level of one-liners: 20 gold coins

Inline Code

On your keyboard, press ⌘K to open the command menu.

Lead

A modal dialog that interrupts the user with important content and expects a response.

Large / Small / Muted

Are you absolutely sure?

Email address

Enter your email address.

Installation

# Typography is a set of Tailwind class recipes applied directly to
# standard HTML elements, no dedicated component file is required.

Usage

export function TypographyDemo() {
  return (
    <div>
      <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
        Taxing Laughter: The Joke Tax Chronicles
      </h1>
      <p className="leading-7 [&:not(:first-child)]:mt-6">
        The king, seeing how much happier his subjects were, realized the
        error of his ways and repealed the joke tax.
      </p>
    </div>
  )
}

Elements

Element	Description
h1 - h4	Heading levels, from page titles down to section headings
p	Body paragraph text
blockquote	Quoted content with a left border
table	A basic bordered table
ul	An unordered list
code	Inline code snippet
lead	A larger muted introductory paragraph
large / small / muted	Utility text sizes for emphasis or de-emphasis