# Shadcn Typography

> Free shadcn/ui typography for React — a set of Tailwind classes for headings, prose, blockquotes, lists, inline code, and tables: a full article, the heading scale, and inline elements.

Source: https://designrevision.com/components/typography

**Shadcn Typography** isn't a component — it's a set of **Tailwind classes** for styling headings, prose, blockquotes, lists, inline code, and tables. You copy the class strings onto your own elements rather than installing anything, which gives you precise, per-element control inside JSX. The examples below cover a full article, the heading scale, and inline elements.

## How it works

There's nothing to add. Put the class string on the element you need:

```tsx
<h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight">
  The Joke Tax Chronicles
</h1>
<p className="leading-7 [&:not(:first-child)]:mt-6">
  Once upon a time, in a far-off land…
</p>
```

Because it's plain markup plus utilities, it works anywhere Tailwind is configured — no package, no registry component.

## The heading scale

```tsx
h1 → scroll-m-20 text-4xl font-extrabold tracking-tight
h2 → scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight
h3 → scroll-m-20 text-2xl font-semibold tracking-tight
h4 → scroll-m-20 text-xl font-semibold tracking-tight
```

Alongside the headings sit the supporting styles — **lead** (`text-muted-foreground text-xl`), **large** (`text-lg font-semibold`), **small** (`text-sm leading-none font-medium`), and **muted** (`text-muted-foreground text-sm`). The Heading scale example shows them together.

## Inline elements

Blockquotes, inline code, lists, and tables each have a canonical class string:

```tsx
<blockquote className="mt-6 border-l-2 pl-6 italic">…</blockquote>
<code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
  npm install
</code>
```

The Inline elements example collects them in one place.

## vs. the Tailwind typography plugin

Two different jobs:

- **`@tailwindcss/typography` (`prose`)** — styles a block of raw HTML automatically. Ideal for **rendered Markdown** or CMS output you don't control.
- **These classes** — style each element explicitly for precise control in hand-written **components**.

Use `prose` for generated content; use these per-element classes for the components you write yourself.

## Changing the font

The classes only set size, weight, spacing, and colour — the family comes from your theme. Set `--font-sans` (and a heading font if you want one) in your Tailwind theme and every element here picks it up.

---

## Prose article

A full styled article — heading, lead, sections, blockquote, and list.

**Install:**

```bash
npx shadcn@latest add @designrevision/typography-demo-01
```

```tsx
// components/ui/typography-demo-01.tsx
export default function TypographyDemo01() {
  return (
    <div className="w-full max-w-2xl">
      <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
        The Joke Tax Chronicles
      </h1>
      <p className="text-muted-foreground mt-4 text-xl">
        Once upon a time, in a far-off land, there was a very lazy king who
        spent all day lounging on his throne.
      </p>
      <h2 className="mt-8 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">
        The King's Plan
      </h2>
      <p className="leading-7 [&:not(:first-child)]:mt-6">
        The king thought long and hard, and finally came up with a brilliant
        plan: he would tax the jokes in the kingdom.
      </p>
      <blockquote className="mt-6 border-l-2 pl-6 italic">
        "After all," he said, "everyone enjoys a good joke, so it's only fair
        that they should pay for the privilege."
      </blockquote>
      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
        The Joke Tax
      </h3>
      <p className="leading-7 [&:not(:first-child)]:mt-6">
        The king's subjects were not amused. They grumbled and complained, but
        the king was firm:
      </p>
      <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
        <li>1st level of puns: 5 gold coins</li>
        <li>2nd level of jokes: 10 gold coins</li>
        <li>3rd level of one-liners: 20 gold coins</li>
      </ul>
      <p className="leading-7 [&:not(:first-child)]:mt-6">
        As a result, people stopped telling jokes, and the kingdom fell into a
        gloom. But there was one person who refused to let the king's
        foolishness get him down.
      </p>
    </div>
  )
}
```

---

## Heading scale

The h1–h4 scale plus lead, large, small, and muted text styles.

**Install:**

```bash
npx shadcn@latest add @designrevision/typography-headings-01
```

```tsx
// components/ui/typography-headings-01.tsx
export default function TypographyHeadings01() {
  return (
    <div className="w-full max-w-xl space-y-4">
      <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight">
        Heading 1
      </h1>
      <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight">
        Heading 2
      </h2>
      <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
        Heading 3
      </h3>
      <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
        Heading 4
      </h4>
      <p className="text-muted-foreground text-xl">
        Lead — a larger intro paragraph that sets up the section below it.
      </p>
      <div className="text-lg font-semibold">Large — an emphasized line.</div>
      <p className="leading-7">
        Paragraph — the default body copy with comfortable line height for long
        passages of reading.
      </p>
      <small className="text-sm leading-none font-medium">
        Small — a fine-print line.
      </small>
      <p className="text-muted-foreground text-sm">
        Muted — secondary helper text.
      </p>
    </div>
  )
}
```

---

## Inline elements & table

Blockquote, inline code, list, and a styled table.

**Install:**

```bash
npx shadcn@latest add @designrevision/typography-inline-01
```

```tsx
// components/ui/typography-inline-01.tsx
const taxes = [
  { king: "King Solomon", tax: "100 gold coins" },
  { king: "King David", tax: "50 gold coins" },
  { king: "King Frederick", tax: "25 gold coins" },
]

export default function TypographyInline01() {
  return (
    <div className="w-full max-w-xl space-y-6">
      <blockquote className="border-l-2 pl-6 italic">
        "After all," he said, "everyone enjoys a good joke, so it's only fair
        that they should pay for the privilege."
      </blockquote>

      <p className="leading-7">
        You can install the package with{" "}
        <code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
          npm install
        </code>{" "}
        and import it anywhere.
      </p>

      <ul className="ml-6 list-disc [&>li]:mt-2">
        <li>First level of puns</li>
        <li>Second level of jokes</li>
        <li>Third level of one-liners</li>
      </ul>

      <div className="my-6 w-full overflow-y-auto">
        <table className="w-full">
          <thead>
            <tr className="even:bg-muted m-0 border-t p-0">
              <th className="border px-4 py-2 text-left font-bold">King</th>
              <th className="border px-4 py-2 text-left font-bold">
                Joke Tax
              </th>
            </tr>
          </thead>
          <tbody>
            {taxes.map((row) => (
              <tr key={row.king} className="even:bg-muted m-0 border-t p-0">
                <td className="border px-4 py-2 text-left">{row.king}</td>
                <td className="border px-4 py-2 text-left">{row.tax}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}
```