Usage

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

Anatomy

Typography maps visual type values to semantic elements by default.

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

export default () => (
  <Typography type="h1">Heading</Typography>
);

Examples

Scale

Primitives

• 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

Render Props

Use the React Aria Components-style render prop when you need to customize the rendered element.

Customization

Tailwind CSS

Global CSS

To customize the Typography component classes, you can use the @layer components directive. Learn more.

@layer components {
  .typography--h1 {
    @apply font-extrabold tracking-tight;
  }

  .typography--code {
    @apply rounded-md bg-default-100 font-mono dark:bg-default-50/20;
  }
}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Typography component uses these CSS classes (View source styles):

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

Related Components