Components
Typography
Heading, headline, description and inline code styles for a consistent typographic hierarchy.
Installation
- $npx litefy@latest add typography
- $pnpm dlx litefy@latest add typography
- $yarn dlx litefy@latest add typography
- $bun --bun litefy@latest add typography
Usage
Headings
Responsive headings from h1 to h6 variants with semibold weight and tight tracking.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
import { Typography } from "@/ui";
export default function TypographyHeadingsDemo() {
return (
<div className="w-full max-w-2xl space-y-3">
<Typography variant="h1">Heading 1</Typography>
<Typography variant="h2">Heading 2</Typography>
<Typography variant="h3">Heading 3</Typography>
<Typography variant="h4">Heading 4</Typography>
<Typography variant="h5">Heading 5</Typography>
<Typography variant="h6">Heading 6</Typography>
</div>
);
}
Text
Headline, description and inline code variants for page content.
Design System
A set of typographic styles for building consistent page hierarchies. Use heading-h* variants on headings and description for supporting body text.
Inline code inside body text: description-code
import { Typography } from "@/ui";
export default function TypographyTextDemo() {
return (
<div className="w-full max-w-2xl space-y-4">
<Typography variant="headline">Design System</Typography>
<Typography>
A set of typographic styles for building consistent page hierarchies.
Use <Typography variant="heading-code">heading-h*</Typography> variants
on headings and <Typography variant="description-code">description</Typography>{" "}
for supporting body text.
</Typography>
<Typography className="text-sm">
Inline code inside body text:{" "}
<Typography variant="description-code">description-code</Typography>
</Typography>
</div>
);
}
API Reference
Typography
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'headline' | 'description' | 'heading-code' | 'description-code' | 'description' | Typographic variant; also decides the rendered tag (h1~h6, p or code) |
className | ClassNameValue | - | Custom CSS class |
...props | React.ComponentProps<"p"> | - | Supports all native paragraph props |
Variants
| Variant | Rendered tag | Description |
|---|---|---|
h1 ~ h6 | h1 ~ h6 | Responsive headings, decreasing size per level |
headline | h1 | Bold page-level headline with vertical spacing |
description | p | Muted body text |
heading-code | code | Inline code styled for headings |
description-code | code | Inline code styled for body text |