Import

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

Usage

Build better interfaces

Typography that stays semantic

Composable by default

Small heading

HeroUI Text uses React Aria Components Text as the primitive, with semantic typography types and render-prop polymorphism.

Smaller muted body copy for secondary descriptions.

pnpm add @heroui/react

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

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

Text maps visual type values to semantic elements by default.

Primitives

Dashboard

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

Paragraph supports base, sm, and xs sizes.

Text.Code

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

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

Text.Heading maps level={1..6} to type="h1" through type="h6".
Text.Paragraph maps size="base" | "sm" | "xs" to body text styles.
Text.Code maps to the inline code style.
Text.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 Text primitive.

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

export const Prose = () => {
  return (
    <Text.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 {Text} 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

.text - Base typography primitive
.text-prose - Rich prose container

Type Classes

.text--h1 through .text--h6
.text--body, .text--body-sm, .text--body-xs
.text--code

Modifier Classes

.text--align-start, .text--align-center, .text--align-end, .text--align-justify
.text--color-default, .text--color-muted
.text--truncate
.text--weight-normal, .text--weight-medium, .text--weight-semibold, .text--weight-bold

API Reference

Text 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.

TextNew