Docs/Typography

Typography

Typography components for semantic text styling. H1-H4, Paragraph, Lead, Large, Small, Muted, Blockquote, InlineCode, List.

Usage

tsx

1import { H1, H2, P, Lead, Blockquote } from '@storm-ds/ui'
2
3<H1>Page Title</H1>
4<P>Body text here...</P>

Headings

Heading 1

Heading 2

Heading 3

tsx

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

Body Text

The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

A lead paragraph stands out from the rest of the content with slightly larger text.

Muted text is used for secondary information and helper text.

tsx

1<P>Regular paragraph text</P>
2<Lead>Lead text for introductions</Lead>
3<Large>Large body text</Large>
4<Small>Small fine print</Small>
5<Muted>Muted secondary text</Muted>

Blockquote

The best way to predict the future is to invent it. - Alan Kay

tsx

1<Blockquote>The only way to do great work is to love what you do.</Blockquote>

Inline Code

Install the package with npm install @storm-ds/ui and import components.

tsx

1<P>Use <InlineCode>npm install</InlineCode> to get started</P>

Lists

First list item
Second list item
Third list item

tsx

1<ul className="space-y-2">
2  <li>First item</li>
3  <li>Second item</li>
4  <li>Third item</li>
5</ul>

Props

Prop	Type	Default	Description
className	string	-	Custom classes (merged via cn)
children	React.ReactNode	-	Text content

Use with AI

Create a Next.js component using Storm UI's Typography components for semantic text styling. Import: `import { H1, H2, H3, H4, P, Lead, Large, Small, Muted, Blockquote, InlineCode } from '@storm-ds/ui'`. H1-H4 for headings with appropriate sizes and weights. P for regular paragraphs. Lead for introductory text. Large for emphasis. Small for fine print. Muted for secondary/disabled text. Blockquote for citations. InlineCode for code snippets. All support className overrides. Use for structured, accessible content hierarchy. Example: `<H1>Title</H1>`, `<P>Body text</P>`, `<Lead>Introduction</Lead>`, `<InlineCode>code</InlineCode>`

Kbd

Breadcrumb