Typography

Styles for headings, paragraphs, lists, and more.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/typography.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

The king thought long and hard, and finally came up with a brilliant plan.

"After all," he said, "everyone enjoys a good joke."

First item
Second item

Usage

How to use this component in your code.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<p className="leading-7">Paragraph text</p>
<blockquote className="border-l-2 pl-6 italic">Quote</blockquote>
<ul className="my-6 ml-6 list-disc">
  <li>List item</li>
</ul>