引入

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

用法

h136px / 600 / 1.11 / tight

打造更出色的界面

h230px / 600 / 1.17 / tight

为智能时代而生

h324px / 600 / 1.25 / tight

按您的条件定价

h420px / 600 / 1.33 / tight

申请创业计划

h518px / 600 / 1.39 / tight

卡片标题

h616px / 600 / 1.50 / tight

较小的功能标题

body16px / 400 / 1.75

用于文档、营销文案与描述的主要正文。

body-sm14px / 400 / 1.50

次要正文、表格单元格、导航与侧边栏项。

body-xs12px / 400 / 1.25

说明文字、徽章、辅助文本与细则。

code14px / mono

pnpm add @heroui/react

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

const scale = [
  {
    label: "h1",

默认情况下，Typography 会将视觉上的 type 映射到对应的语义化元素。

子组件

仪表盘

便捷原语是 Typography 的薄封装，可在不学习第二套样式系统的情况下选择显式组合。

Paragraph 支持 base、sm 和 xs 尺寸。

Typography.Code

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

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

Typography.Heading 将 level={1..6} 映射为 type="h1" 至 type="h6"。
Typography.Paragraph 将 size="base" | "sm" | "xs" 映射为正文样式。
Typography.Code 映射为行内代码样式。
Typography.Prose 为以常规 HTML 子节点传入的富文本内容提供排版样式。

Prose

正文标题

Prose 适用于标记已是语义化、由 HeroUI 应用默认排版节奏的写作型内容。

章节标题

行内代码如 render 与 Typography 原语获得相同的代码样式处理。

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

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

Render Prop

H1 视觉样式，h2 语义元素

render prop 可更换底层元素，同时保留 HeroUI 的 props 与样式。

"use client";

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

export const RenderProps = () => {

需要自定义实际渲染的元素时，可使用 React Aria Components 风格的 render prop。

CSS 类名

基础类

.typography - 排版基础原语
.typography-prose - 富文本文章体容器

类型类

.typography--h1 至 .typography--h6
.typography--body、.typography--body-sm、.typography--body-xs
.typography--code

修饰类

.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 参考

Typography 属性

属性	类型	默认值	说明
`type`	`'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'body' \| 'body-sm' \| 'body-xs' \| 'code'`	`'body'`	语义化排版样式。
`align`	`'start' \| 'center' \| 'end' \| 'justify'`	`'start'`	文本对齐。
`color`	`'default' \| 'muted'`	`'default'`	文本颜色。
`weight`	`'normal' \| 'medium' \| 'semibold' \| 'bold'`	-	字重覆盖。
`truncate`	`boolean`	-	将文本截断为单行并显示省略号。
`render`	`DOMRenderFunction`	-	来自 React Aria 的自定义渲染函数。
`children`	`ReactNode`	-	文本内容。

Typography 排版新

引入

用法