Typography

A complete set of semantic typography components for headings, body text, and inline elements. Each renders the correct HTML tag with consistent styling.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>

Body Text

Lead paragraph for introductory copy.

Standard paragraph with relaxed leading for body text.

Large semibold text for emphasis.

Small text with medium weight.

Muted text for secondary information.

<Lead>Lead paragraph for introductory copy.</Lead>
<P>Standard paragraph with relaxed leading for body text.</P>
<Large>Large semibold text for emphasis.</Large>
<Small>Small text with medium weight.</Small>
<Muted>Muted text for secondary information.</Muted>

Inline Elements

npm install substrate-ui

monospace text without background

<Code>npm install substrate-ui</Code>
<Mono>monospace text without background</Mono>

API Reference

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes to apply to the typography element.
`children` required	`React.ReactNode`	—	The text content to render.