Import

import {Typography} from "@heroui/react";

Usage

h136px / 600 / 1.11 / tight

Build better interfaces

h230px / 600 / 1.17 / tight

Built for the intelligence age

h324px / 600 / 1.25 / tight

Pricing on your terms

h420px / 600 / 1.33 / tight

Apply to the startup program

h518px / 600 / 1.39 / tight

Card titles

h616px / 600 / 1.50 / tight

Smaller feature headers

body16px / 400 / 1.75

Primary body text used across documentation, marketing copy, and descriptions.

body-sm14px / 400 / 1.50

Secondary body, table cells, navigation, and sidebar items.

body-xs12px / 400 / 1.25

Captions, badges, helper text, and fine print.

code14px / mono

pnpm add @heroui/react

import {Typography} from "@heroui/react";

const scale = [
  {
    label: "h1",

Typography maps visual type values to semantic elements by default.

Primitives

Dashboard

Convenience primitives are thin wrappers over Typography, so you can choose explicit composition without learning a second styling system.

Paragraph supports base, sm, and xs sizes.

Typography.Code

import {Typography} from "@heroui/react";

export const Primitives = () => {
  return (
    <div className="flex max-w-xl flex-col gap-4">

Typography.Heading maps level={1..6} to type="h1" through type="h6".
Typography.Paragraph maps size="base" | "sm" | "xs" to body text styles.
Typography.Code maps to the inline code style.
Typography.Prose styles rich content passed as regular HTML children.

Prose

Prose title

Prose is for authored content where the markup is already semantic and HeroUI applies the default typography rhythm.

Section title

Inline code like render receives the same code treatment as the Typography primitive.

import {Typography} from "@heroui/react";

export const Prose = () => {
  return (
    <Typography.Prose className="flex max-w-xl flex-col gap-3">

Render Prop

H1 visual style, h2 semantic element

The render prop can swap the underlying element while preserving HeroUI props and styles.

"use client";

import {Typography} from "@heroui/react";

export const RenderProps = () => {

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--h1 through .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.

TypographyNew