Typography
This is a Typography component.
1. Heading Levels
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
2. Alignment
Left Aligned
Center Aligned
Right Aligned
3. Weights
Light Weight
Normal Weight
Medium Weight
Semibold Weight
Bold Weight
Extrabold Weight
1. Text Variants
Default text with normal weight and size.
Extra small text size.
Small text size.
Base text size (default).
Large text size.
Extra large text size.
2. Styles
Default text style.
Muted text style for less important content.
Accent text style for highlighting.
Destructive text style for warnings or errors.
3. Weights and Leading
Light weight text.
Normal weight text.
Medium weight text.
Semibold weight text.
Bold weight text.
This text has tight line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam.
This text has relaxed line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam.
Installation
1. Dependencies
npm install clsx tailwind-merge class-variance-authority2. Paste inside @/lib/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: Parameters<typeof clsx>) {
return twMerge(clsx(...inputs));
}
3. Copy Typography Code
Copy Typography Code
Heading Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| level | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | No | "h1" | The heading level. |
| align | "left" | "center" | "right" | No | "left" | Text alignment. |
| weight | "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold" | No | "bold" | Font weight. |
| children | React.ReactNode | Yes | undefined | The content of the heading. |
| className | string | No | undefined | Additional class names for styling. |
Text Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| size | "xs" | "sm" | "base" | "lg" | "xl" | No | "base" | Font size variant. |
| align | "left" | "center" | "right" | "justify" | No | "left" | Text alignment. |
| variant | "default" | "muted" | "accent" | "destructive" | No | "default" | Text style variant. |
| weight | "light" | "normal" | "medium" | "semibold" | "bold" | No | "normal" | Font weight variant. |
| leading | "none" | "tight" | "snug" | "normal" | "relaxed" | "loose" | No | "normal" | Line height variant. |
| children | React.ReactNode | Yes | undefined | The content of the text. |
| className | string | No | undefined | Additional class names for styling. |