Typography

Themed text components for headings, paragraphs, and semantic text styles. All share a single TypographyTheme and follow the same pattern: thin forwardRef wrappers that render a semantic HTML element with themed classes merged via cn().

Import

import { H1, H2, H3, H4, H5, H6, P, BlockQuote, Lead, Large, Small, Muted } from 'reablocks';

Components

All accept className, theme, children, ref, and their respective HTML element attributes.

All headings (H1–H6) include scroll-m-20 for scroll-margin compatibility with anchor links.

Common Props

Every typography component accepts:

Plus all attributes of the underlying HTML element.

Basic Usage

<H1>Page Title</H1>
<H2>Section Heading</H2>
<P>Body paragraph text with automatic top margin on non-first children.</P>
<BlockQuote>A notable quote with left border and italic styling.</BlockQuote>
<Lead>Intro text in larger, secondary-colored style.</Lead>
<Large>Emphasized larger text.</Large>
<Small>Fine print or label text.</Small>
<Muted>Subdued helper text.</Muted>

Full Page Example

<div className="max-w-2xl">
  <H1>The Page Title</H1>
  <Lead>A brief introduction paragraph in larger, muted style.</Lead>
  <H2>Section Heading</H2>
  <P>Regular paragraph content with leading-7 line height.</P>
  <BlockQuote>A quoted passage with left border.</BlockQuote>
  <H3>Subsection</H3>
  <P>More content here.</P>
  <Large>Important callout text</Large>
  <Small>Fine print label</Small>
  <Muted>Helper text in muted style</Muted>
</div>

TypographyTheme Interface

All components share this single theme object (keyed as 'typography' in the theme):

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;
}

Default and unify themes are identical for typography.