Documentation

Typography

Semantic text components for consistent typography.

Installation

pnpm add @rouf-dev/pantheon-ui

Usage

import { Typography } from "@rouf-dev/pantheon-ui";

// Using variants
<Typography variant="h1">Heading 1</Typography>
<Typography variant="h2">Heading 2</Typography>
<Typography variant="p">Paragraph text</Typography>
<Typography variant="code">inline code</Typography>

// Using as prop for semantic HTML
<Typography as="h1" variant="h1">Semantic H1</Typography>
<Typography as="p" variant="muted">Muted paragraph</Typography>

Examples

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Body Text

Lead text that stands out

Regular paragraph text

Large text

Small text

Muted text

Code

Use inline code in text

const greeting = "Hello World";

Semantic HTML

Semantic H1

Muted paragraph

Small span

Available Variants

h1, h2, h3, h4 - Heading styles
p - Paragraph text
lead - Lead paragraph (larger)
large - Large text
small - Small text
muted - Muted/secondary text
code - Inline code styling