Components

Typography

new

Styles for headings, paragraphs, lists and other text, as utility classes.

The quiet interface

Good tools get out of the way. Here is what that means for type.

Start from the text

Set the body first: a comfortable size, a generous line height and a measure under seventy-five characters. Headings are tuned against it, not the other way round.

Readers never notice good type. They only notice when reading got hard.

Three rules

One typeface, two or three weights.
Contrast through size and weight, color only for muted text.
Tighten tracking as size grows.

Installation

Nothing to install. Typography is a set of class names on plain HTML elements: copy the ones you need. Colors come from foreground and muted-foreground, so text follows the theme without extra work.

Usage

<h1 className="text-4xl font-semibold tracking-tight text-balance">Title</h1>
<p className="mt-4 text-xl text-muted-foreground">Lead paragraph.</p>
<p className="mt-6 leading-7">Body text.</p>

Examples

h1

Ship the interface, not the boilerplate

h2

Getting started

h3

Install the CLI

h4

Configure the registry

Paragraph

Every component is a file in your project. Read it, change it, delete the parts you do not need. Nothing breaks on the next update, because there is no package to update.

Blockquote

A design system is finished when there is nothing left to decide twice.

List

Copy the component into your project.
Adjust the tokens to your brand.
Ship.

Inline code

Run npx shadcn@latest add @blank/button to add a component.

Lead

An introduction paragraph under a page title.

A component library you own, with a design language that holds together.

Large

Are you absolutely sure?

Small

Email address

Muted

Enter the email you signed up with.

Table

Token	Use
foreground	Body text and headings
muted-foreground	Secondary text, captions, quotes
brand	Links and focus