All Components

Browse all 84 HeroUI v3 component modules, compound APIs, and local interactive previews.

84 public component modulesOpen interactive gallery

Actions & selection

Buttons and direct selection controls.

11 modules

按钮 / Button

A local interactive preview of HeroUI's Button component.

@heroui/react13 examples · 4 exports

按钮组 / Button Group

A local interactive preview of HeroUI's Button Group component.

@heroui/react8 examples · 6 exports

关闭按钮 / Close Button

A local interactive preview of HeroUI's Close Button component.

@heroui/react3 examples · 3 exports

切换按钮 / Toggle Button

A local interactive preview of HeroUI's Toggle Button component.

@heroui/react6 examples · 3 exports

切换按钮组 / Toggle Button Group

A local interactive preview of HeroUI's Toggle Button Group component.

@heroui/react9 examples · 6 exports

开关 / Switch

A local interactive preview of HeroUI's Switch component.

@heroui/react15 examples · 7 exports

开关组 / Switch Group

A local interactive preview of HeroUI's Switch Group component.

@heroui/react1 examples · 3 exports

复选框 / Checkbox

A local interactive preview of HeroUI's Checkbox component.

@heroui/react14 examples · 6 exports

复选框组 / Checkbox Group

A local interactive preview of HeroUI's Checkbox Group component.

@heroui/react9 examples · 2 exports

单选框 / Radio

A local interactive preview of HeroUI's Radio component.

@heroui/react1 examples · 6 exports

单选框组 / Radio Group

A local interactive preview of HeroUI's Radio Group component.

@heroui/react11 examples · 3 exports

Forms & input

Inputs, fields, validation, and form composition.

17 modules

自动完成 / Autocomplete

A local interactive preview of HeroUI's Autocomplete component.

@heroui/react20 examples · 9 exports

组合框 / Combo Box

A local interactive preview of HeroUI's Combo Box component.

@heroui/react18 examples · 7 exports

输入框 / Input

A local interactive preview of HeroUI's Input component.

@heroui/react6 examples · 3 exports

输入框组 / Input Group

A local interactive preview of HeroUI's Input Group component.

@heroui/react20 examples · 7 exports

验证码输入 / Input OTP

A local interactive preview of HeroUI's Input OTP component.

@heroui/react10 examples · 9 exports

多行输入框 / Text Area

A local interactive preview of HeroUI's Text Area component.

@heroui/react6 examples · 3 exports

文本字段 / Text Field

A local interactive preview of HeroUI's Text Field component.

@heroui/react12 examples · 4 exports

搜索字段 / Search Field

A local interactive preview of HeroUI's Search Field component.

@heroui/react14 examples · 7 exports

数字字段 / Number Field

A local interactive preview of HeroUI's Number Field component.

@heroui/react16 examples · 7 exports

选择器 / Select

A local interactive preview of HeroUI's Select component.

@heroui/react17 examples · 7 exports

滑块 / Slider

A local interactive preview of HeroUI's Slider component.

@heroui/react5 examples · 8 exports

表单 / Form

A local interactive preview of HeroUI's Form component.

@heroui/react2 examples · 2 exports

字段组 / Fieldset

A local interactive preview of HeroUI's Fieldset component.

@heroui/react2 examples · 6 exports

标签 / Label

A local interactive preview of HeroUI's Label component.

@heroui/react1 examples · 3 exports

描述 / Description

A local interactive preview of HeroUI's Description component.

@heroui/react1 examples · 3 exports

错误消息 / Error Message

A local interactive preview of HeroUI's Error Message component.

@heroui/react1 examples · 3 exports

字段错误 / Field Error

A local interactive preview of HeroUI's Field Error component.

@heroui/react1 examples · 3 exports

Color

Accessible color selection and editing controls.

7 modules

颜色区域 / Color Area

A local interactive preview of HeroUI's Color Area component.

@heroui/react6 examples · 4 exports

颜色字段 / Color Field

A local interactive preview of HeroUI's Color Field component.

@heroui/react12 examples · 3 exports

颜色输入组 / Color Input Group

A local interactive preview of HeroUI's Color Input Group component.

@heroui/react/color-input-group1 examples · 6 exports

颜色选择器 / Color Picker

A local interactive preview of HeroUI's Color Picker component.

@heroui/react5 examples · 5 exports

颜色滑块 / Color Slider

A local interactive preview of HeroUI's Color Slider component.

@heroui/react8 examples · 6 exports

色板 / Color Swatch

A local interactive preview of HeroUI's Color Swatch component.

@heroui/react7 examples · 3 exports

色板选择器 / Color Swatch Picker

A local interactive preview of HeroUI's Color Swatch Picker component.

@heroui/react9 examples · 6 exports

Date & time

Date and time entry and picker patterns.

5 modules

日期字段 / Date Field

A local interactive preview of HeroUI's Date Field component.

@heroui/react16 examples · 3 exports

日期输入组 / Date Input Group

A local interactive preview of HeroUI's Date Input Group component.

@heroui/react/date-input-group1 examples · 8 exports

日期选择器 / Date Picker

A local interactive preview of HeroUI's Date Picker component.

@heroui/react9 examples · 6 exports

日期范围选择器 / Date Range Picker

A local interactive preview of HeroUI's Date Range Picker component.

@heroui/react9 examples · 7 exports

时间字段 / Time Field

A local interactive preview of HeroUI's Time Field component.

@heroui/react14 examples · 3 exports

Collections & data

Selectable collections, structured data, and tags.

6 modules

列表框 / List Box

A local interactive preview of HeroUI's List Box component.

@heroui/react8 examples · 3 exports

列表框项目 / List Box Item

A local interactive preview of HeroUI's List Box Item component.

@heroui/react1 examples · 4 exports

列表框分组 / List Box Section

A local interactive preview of HeroUI's List Box Section component.

@heroui/react1 examples · 3 exports

表格 / Table

A local interactive preview of HeroUI's Table component.

@heroui/react12 examples · 17 exports

标签 / Tag

A local interactive preview of HeroUI's Tag component.

@heroui/react1 examples · 4 exports

标签组 / Tag Group

A local interactive preview of HeroUI's Tag Group component.

@heroui/react11 examples · 5 exports

Content display

Content, identity, typography, and visual surfaces.

10 modules

头像 / Avatar

A local interactive preview of HeroUI's Avatar component.

@heroui/react7 examples · 5 exports

徽标 / Badge

A local interactive preview of HeroUI's Badge component.

@heroui/react7 examples · 5 exports

卡片 / Card

A local interactive preview of HeroUI's Card component.

@heroui/react6 examples · 8 exports

标签胶囊 / Chip

A local interactive preview of HeroUI's Chip component.

@heroui/react4 examples · 4 exports

键盘按键 / Kbd

A local interactive preview of HeroUI's Kbd component.

@heroui/react6 examples · 7 exports

分隔线 / Separator

A local interactive preview of HeroUI's Separator component.

@heroui/react6 examples · 3 exports

表面 / Surface

A local interactive preview of HeroUI's Surface component.

@heroui/react1 examples · 4 exports

排版 / Typography

A local interactive preview of HeroUI's Typography component.

@heroui/react4 examples · 7 exports

标题 / Header

A local interactive preview of HeroUI's Header component.

@heroui/react1 examples · 3 exports

滚动阴影 / Scroll Shadow

A local interactive preview of HeroUI's Scroll Shadow component.

@heroui/react6 examples · 4 exports

Status & feedback

Status, progress, loading, and notification feedback.

8 modules

提示 / Alert

A local interactive preview of HeroUI's Alert component.

@heroui/react1 examples · 7 exports

进度条 / Progress Bar

A local interactive preview of HeroUI's Progress Bar component.

@heroui/react6 examples · 6 exports

环形进度 / Progress Circle

A local interactive preview of HeroUI's Progress Circle component.

@heroui/react6 examples · 6 exports

度量条 / Meter

A local interactive preview of HeroUI's Meter component.

@heroui/react5 examples · 6 exports

骨架屏 / Skeleton

A local interactive preview of HeroUI's Skeleton component.

@heroui/react7 examples · 3 exports

加载指示器 / Spinner

A local interactive preview of HeroUI's Spinner component.

@heroui/react3 examples · 3 exports

空状态 / Empty State

A local interactive preview of HeroUI's Empty State component.

@heroui/react1 examples · 3 exports

轻提示 / Toast

A local interactive preview of HeroUI's Toast component.

@heroui/react9 examples · 15 exports

Overlays & dialogs

Dialogs, drawers, popovers, and contextual overlays.

5 modules

警告对话框 / Alert Dialog

A local interactive preview of HeroUI's Alert Dialog component.

@heroui/react13 examples · 13 exports

抽屉 / Drawer

A local interactive preview of HeroUI's Drawer component.

@heroui/react8 examples · 13 exports

模态框 / Modal

A local interactive preview of HeroUI's Modal component.

@heroui/react13 examples · 13 exports

弹出框 / Popover

A local interactive preview of HeroUI's Popover component.

@heroui/react5 examples · 8 exports

工具提示 / Tooltip

A local interactive preview of HeroUI's Tooltip component.

@heroui/react5 examples · 6 exports

Disclosure

Expand and collapse related content.

3 modules

手风琴 / Accordion

A local interactive preview of HeroUI's Accordion component.

@heroui/react10 examples · 9 exports

折叠面板 / Disclosure

A local interactive preview of HeroUI's Disclosure component.

@heroui/react2 examples · 8 exports

折叠面板组 / Disclosure Group

A local interactive preview of HeroUI's Disclosure Group component.

@heroui/react2 examples · 4 exports

In progress

Publicly exported calendar modules still marked in progress upstream.

3 modules

日历 / Calendar

IN PROGRESS

A local interactive preview of HeroUI's Calendar component.

@heroui/react19 examples · 15 exports

日历年份选择器 / Calendar Year Picker

IN PROGRESS

A local interactive preview of HeroUI's Calendar Year Picker component.

@heroui/react1 examples · 11 exports

范围日历 / Range Calendar

IN PROGRESS

A local interactive preview of HeroUI's Range Calendar component.

@heroui/react19 examples · 15 exports

Local source: vendor/en/react/components/index.mdx

Generated from the pinned HeroUI v3 commit with internal links and previews adapted for JGuang.

HeroUI ReactHeroUI React 文档

Local bilingual documentation for HeroUI React v3.HeroUI React v3 本地中英文文档。

Introduction介绍

An open-source UI component library for building beautiful and accessible user interfaces.一个开源 UI 组件库，用于构建美观且易于访问的用户界面。

All Components

Actions & selection

按钮 / Button

按钮组 / Button Group

关闭按钮 / Close Button

切换按钮 / Toggle Button

切换按钮组 / Toggle Button Group

开关 / Switch

开关组 / Switch Group

复选框 / Checkbox

复选框组 / Checkbox Group

单选框 / Radio

单选框组 / Radio Group

Forms & input

自动完成 / Autocomplete

组合框 / Combo Box

输入框 / Input

输入框组 / Input Group

验证码输入 / Input OTP

多行输入框 / Text Area

文本字段 / Text Field

搜索字段 / Search Field

数字字段 / Number Field

选择器 / Select

滑块 / Slider

表单 / Form

字段组 / Fieldset

标签 / Label

描述 / Description

错误消息 / Error Message

字段错误 / Field Error

Color

颜色区域 / Color Area

颜色字段 / Color Field

颜色输入组 / Color Input Group

颜色选择器 / Color Picker

颜色滑块 / Color Slider

色板 / Color Swatch

色板选择器 / Color Swatch Picker

Date & time

日期字段 / Date Field

日期输入组 / Date Input Group

日期选择器 / Date Picker

日期范围选择器 / Date Range Picker

时间字段 / Time Field

Navigation & menus

面包屑 / Breadcrumbs

链接 / Link

标签页 / Tabs

分页 / Pagination

工具栏 / Toolbar

下拉菜单 / Dropdown

菜单 / Menu

菜单项 / Menu Item

菜单分组 / Menu Section

Collections & data

列表框 / List Box

列表框项目 / List Box Item

列表框分组 / List Box Section

表格 / Table

标签 / Tag

标签组 / Tag Group

Content display

头像 / Avatar

徽标 / Badge

卡片 / Card

标签胶囊 / Chip

键盘按键 / Kbd

分隔线 / Separator

表面 / Surface

排版 / Typography

标题 / Header

滚动阴影 / Scroll Shadow

Status & feedback

提示 / Alert

进度条 / Progress Bar

环形进度 / Progress Circle

度量条 / Meter

骨架屏 / Skeleton

加载指示器 / Spinner