Typography

The typography components are semantic HTML wrappers that ship with sensible defaults for every level of headings and body text. They’re designed to be composed and styled with Tailwind utility classes via className or via the shared typography theme.

Components

• H1 – page title
• H2 – primary section heading
• H3 – sub-section heading
• H4 – small heading
• H5 – tertiary heading
• H6 – smallest heading
• P – paragraph / body text
• Lead – emphasized intro paragraph
• Large – emphasized inline text
• Small – de-emphasized inline text
• Muted – muted helper text
• BlockQuote – block quotation

Quick Start

To start using the typography components, import them from reablocks.

import { H1, P, Muted } from 'reablocks';


export default function App() {
return (
  <>
    <H1>Welcome</H1>
    <P>Build beautiful interfaces with reablocks.</P>
    <Muted>Last updated today.</Muted>
  </>
);
}

Examples

Headings

Paragraphs

Lead

Large, Small, and Muted

BlockQuote

Everything together

Customizing with className

The old color, variant, fontStyle, and disableMargins props were removed in 10.0.0. Apply Tailwind utilities directly via className, or override the shared theme to change defaults globally.

import { H1, P } from 'reablocks';
 
<H1 className="text-primary tracking-tight">Title</H1>
<P className="font-bold italic">Bold italic body</P>

Theme

Typography uses a per-element theme. Every key maps to a single string of Tailwind classes that’s applied to that semantic element.

interface TypographyTheme {
  h1: string;
  h2: string;
  h3: string;
  h4: string;
  h5: string;
  h6: string;
  p: string;
  blockquote: string;
  lead: string;
  large: string;
  small: string;
  muted: string;
}

Learn more about how to customize in the Theme documentation.

API

H1

H2

H3

H4

H5

H6

P

Lead

Large

Small

Muted

BlockQuote

Migrating from 9.x

See the full guide in Migration.