Docs › Components › Typography

Shadcn Typography

shadcn/ui typography is a set of Tailwind CSS v4 utility-class recipes for long-form content: headings, paragraphs, lists, blockquotes, tables, and inline code. It is not a component or a plugin, just consistent classes you apply per element, so your prose matches the rest of the design. These styles shape blog and docs content across ShadcnStore.

Key features

• Consistent heading sizes, weights, and tracking.
• Readable paragraph leading and spacing.
• Styled lists, blockquotes, inline code, and links.
• Plain Tailwind utilities, no plugin required.
• Fully themeable in light and dark.

Usage

Apply the recommended utilities to each element:

<h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
  The Joke Tax Chronicles
</h1>

<h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight">
  The King's Plan
</h2>

<p className="leading-7 [&:not(:first-child)]:mt-6">
  A paragraph of body text with comfortable leading.
</p>

<blockquote className="mt-6 border-l-2 pl-6 italic">
  "A wise quote goes here."
</blockquote>

<ul className="my-6 ml-6 list-disc [&>li]:mt-2">
  <li>First item</li>
  <li>Second item</li>
</ul>

Inline elements

<code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm">
  npm install
</code>

<a href="#" className="text-primary font-medium underline underline-offset-4">
  a link
</a>

Accessibility

• Keep a logical heading order (one h1, then h2, h3) so screen readers can navigate.
• Do not pick heading levels for size alone; use utilities to size a semantically correct level.
• Maintain sufficient contrast for body text and links in both themes.

When to use these styles

Use the typography recipes for long-form content: blog posts, documentation, marketing copy, and terms pages. For UI microcopy inside components, use the component's own text styles. For a first-class rich-text container, apply these utilities within a Card or article wrapper.

Used in these blocks

• Blogs: article body styling.
• Features: section copy.
• Contact: supporting text.

Related components

Typography pairs with a Separator between sections, a Table for tabular content, and a Card to frame article previews.

FAQ

What is shadcn typography?

shadcn typography is a set of Tailwind utility-class recipes for headings, paragraphs, lists, blockquotes, and inline code, so long-form content looks consistent.

Does shadcn typography need a plugin?

No. It uses plain Tailwind utility classes on each element rather than the Tailwind Typography plugin, so you control every style.

How do I style headings?

Apply the recommended size, weight, and tracking utilities to each heading, for example text-3xl font-extrabold tracking-tight for an h1.

How do I keep prose readable?

Use leading-7 on paragraphs, add vertical spacing between blocks, and constrain the content width for comfortable line length.