Typography
A semantic typography primitive for headings, body copy, and inline code built on React Aria Components Text.
Import
import {Typography} from "@heroui/react";Usage
Typography maps visual type values to semantic elements by default.
Primitives
Typography.Headingmapslevel={1..6}totype="h1"throughtype="h6".Typography.Paragraphmapssize="base" | "sm" | "xs"to body text styles.Typography.Codemaps to the inline code style.Typography.Prosestyles rich content passed as regular HTML children.
Prose
Render Prop
Use the React Aria Components-style render prop when you need to customize the rendered element.
CSS Classes
Base Classes
.typography- Base typography primitive.typography-prose- Rich prose container
Type Classes
.typography--h1through.typography--h6.typography--body,.typography--body-sm,.typography--body-xs.typography--code
Modifier Classes
.typography--align-start,.typography--align-center,.typography--align-end,.typography--align-justify.typography--color-default,.typography--color-muted.typography--truncate.typography--weight-normal,.typography--weight-medium,.typography--weight-semibold,.typography--weight-bold
API Reference
Typography Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'body-sm' | 'body-xs' | 'code' | 'body' | Semantic typography style. |
align | 'start' | 'center' | 'end' | 'justify' | 'start' | Text alignment. |
color | 'default' | 'muted' | 'default' | Text color. |
weight | 'normal' | 'medium' | 'semibold' | 'bold' | - | Font weight override. |
truncate | boolean | - | Truncates the text to one line with ellipsis. |
render | DOMRenderFunction | - | Custom render function from React Aria. |
children | ReactNode | - | Text content. |