JGuang
HeroUI v3.2.2本地预览
84 个组件模块 · 607 个交互示例本地渲染 @heroui/react

操作与选择

按钮与直接选择控件。

11 个组件

按钮 / Button

13 个示例

按钮的 HeroUI v3 本地交互示例。

API 文档

用法

官方示例
1 / 13
HeroUI 示例

变体

官方示例
2 / 13
HeroUI 示例

带图标

官方示例
3 / 13
HeroUI 示例

仅图标

官方示例
4 / 13
HeroUI 示例

加载中

官方示例
5 / 13
HeroUI 示例

加载状态

官方示例
6 / 13
HeroUI 示例

尺寸

官方示例
7 / 13
HeroUI 示例

全宽

官方示例
8 / 13
HeroUI 示例

禁用状态

官方示例
9 / 13
HeroUI 示例

社交按钮

官方示例
10 / 13
HeroUI 示例

自定义渲染函数

官方示例
11 / 13
HeroUI 示例

添加自定义变体

官方示例
12 / 13
HeroUI 示例

添加涟漪效果

官方示例
13 / 13
HeroUI 示例

按钮组 / Button Group

8 个示例

按钮组的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 8 个 HeroUI 示例

关闭按钮 / Close Button

3 个示例

关闭按钮的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 3 个 HeroUI 示例

切换按钮 / Toggle Button

6 个示例

切换按钮的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 6 个 HeroUI 示例

切换按钮组 / Toggle Button Group

9 个示例

切换按钮组的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 9 个 HeroUI 示例

开关 / Switch

15 个示例

开关的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 15 个 HeroUI 示例

开关组 / Switch Group

1 个示例

开关组的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 1 个 HeroUI 示例

复选框 / Checkbox

14 个示例

复选框的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 14 个 HeroUI 示例

复选框组 / Checkbox Group

9 个示例

复选框组的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 9 个 HeroUI 示例

单选框 / Radio

1 个示例

单选框的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 1 个 HeroUI 示例

单选框组 / Radio Group

11 个示例

单选框组的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 11 个 HeroUI 示例

表单与输入

输入、字段、校验与表单组合。

17 个组件

自动完成 / Autocomplete

20 个示例

自动完成的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 20 个 HeroUI 示例

组合框 / Combo Box

18 个示例

组合框的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 18 个 HeroUI 示例

输入框 / Input

6 个示例

输入框的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 6 个 HeroUI 示例

输入框组 / Input Group

20 个示例

输入框组的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 20 个 HeroUI 示例

验证码输入 / Input OTP

10 个示例

验证码输入的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 10 个 HeroUI 示例

多行输入框 / Text Area

6 个示例

多行输入框的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 6 个 HeroUI 示例

文本字段 / Text Field

12 个示例

文本字段的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 12 个 HeroUI 示例

搜索字段 / Search Field

14 个示例

搜索字段的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 14 个 HeroUI 示例

数字字段 / Number Field

16 个示例

数字字段的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 16 个 HeroUI 示例

选择器 / Select

17 个示例

选择器的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 17 个 HeroUI 示例

滑块 / Slider

5 个示例

滑块的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 5 个 HeroUI 示例

表单 / Form

2 个示例

表单的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 2 个 HeroUI 示例

字段组 / Fieldset

2 个示例

字段组的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 2 个 HeroUI 示例

标签 / Label

1 个示例

标签的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 1 个 HeroUI 示例

描述 / Description

1 个示例

描述的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 1 个 HeroUI 示例

错误消息 / Error Message

1 个示例

错误消息的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 1 个 HeroUI 示例

字段错误 / Field Error

1 个示例

字段错误的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 1 个 HeroUI 示例

颜色选择

支持无障碍的颜色选择与编辑控件。

7 个组件

颜色区域 / Color Area

6 个示例

颜色区域的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 6 个 HeroUI 示例

颜色字段 / Color Field

12 个示例

颜色字段的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 12 个 HeroUI 示例

颜色输入组 / Color Input Group

1 个示例

颜色输入组的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 1 个 HeroUI 示例

颜色选择器 / Color Picker

5 个示例

颜色选择器的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 5 个 HeroUI 示例

颜色滑块 / Color Slider

8 个示例

颜色滑块的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 8 个 HeroUI 示例

色板 / Color Swatch

7 个示例

色板的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 7 个 HeroUI 示例

色板选择器 / Color Swatch Picker

9 个示例

色板选择器的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 9 个 HeroUI 示例

日期与时间

日期与时间输入及选择模式。

5 个组件

日期字段 / Date Field

16 个示例

日期字段的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 16 个 HeroUI 示例

日期输入组 / Date Input Group

1 个示例

日期输入组的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 1 个 HeroUI 示例

日期选择器 / Date Picker

9 个示例

日期选择器的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 9 个 HeroUI 示例

日期范围选择器 / Date Range Picker

9 个示例

日期范围选择器的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 9 个 HeroUI 示例

时间字段 / Time Field

14 个示例

时间字段的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 14 个 HeroUI 示例

列表与数据

可选择集合、结构化数据与标签。

6 个组件

列表框 / List Box

8 个示例

列表框的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 8 个 HeroUI 示例

列表框项目 / List Box Item

1 个示例

列表框项目的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 1 个 HeroUI 示例

列表框分组 / List Box Section

1 个示例

列表框分组的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 1 个 HeroUI 示例

表格 / Table

12 个示例

表格的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 12 个 HeroUI 示例

标签 / Tag

1 个示例

标签的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 1 个 HeroUI 示例

标签组 / Tag Group

11 个示例

标签组的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 11 个 HeroUI 示例

内容展示

内容、身份、排版与视觉表面。

10 个组件

头像 / Avatar

7 个示例

头像的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 7 个 HeroUI 示例

徽标 / Badge

7 个示例

徽标的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 7 个 HeroUI 示例

卡片 / Card

6 个示例

卡片的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 6 个 HeroUI 示例

标签胶囊 / Chip

4 个示例

标签胶囊的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 4 个 HeroUI 示例

键盘按键 / Kbd

6 个示例

键盘按键的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 6 个 HeroUI 示例

分隔线 / Separator

6 个示例

分隔线的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 6 个 HeroUI 示例

表面 / Surface

1 个示例

表面的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 1 个 HeroUI 示例

排版 / Typography

4 个示例

排版的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 4 个 HeroUI 示例

标题 / Header

1 个示例

标题的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 1 个 HeroUI 示例

滚动阴影 / Scroll Shadow

6 个示例

滚动阴影的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 6 个 HeroUI 示例

状态与反馈

状态、进度、加载与通知反馈。

8 个组件

提示 / Alert

1 个示例

提示的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 1 个 HeroUI 示例

进度条 / Progress Bar

6 个示例

进度条的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 6 个 HeroUI 示例

环形进度 / Progress Circle

6 个示例

环形进度的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 6 个 HeroUI 示例

度量条 / Meter

5 个示例

度量条的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 5 个 HeroUI 示例

骨架屏 / Skeleton

7 个示例

骨架屏的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 7 个 HeroUI 示例

加载指示器 / Spinner

3 个示例

加载指示器的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 3 个 HeroUI 示例

空状态 / Empty State

1 个示例

空状态的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 1 个 HeroUI 示例

轻提示 / Toast

9 个示例

轻提示的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 9 个 HeroUI 示例

弹层与对话框

对话框、抽屉、弹出框与上下文浮层。

5 个组件

警告对话框 / Alert Dialog

13 个示例

警告对话框的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 13 个 HeroUI 示例

抽屉 / Drawer

8 个示例

抽屉的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 8 个 HeroUI 示例

模态框 / Modal

13 个示例

模态框的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 13 个 HeroUI 示例

弹出框 / Popover

5 个示例

弹出框的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 5 个 HeroUI 示例

工具提示 / Tooltip

5 个示例

工具提示的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 5 个 HeroUI 示例

展开与折叠

展开与折叠相关内容。

3 个组件

手风琴 / Accordion

10 个示例

手风琴的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 10 个 HeroUI 示例

折叠面板 / Disclosure

2 个示例

折叠面板的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 2 个 HeroUI 示例

折叠面板组 / Disclosure Group

2 个示例

折叠面板组的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 2 个 HeroUI 示例

开发中

已经公开导出、但上游仍标记为开发中的日历模块。

3 个组件

日历 / Calendar

开发中19 个示例

日历的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 19 个 HeroUI 示例

日历年份选择器 / Calendar Year Picker

开发中1 个示例

日历年份选择器的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 1 个 HeroUI 示例

范围日历 / Range Calendar

开发中19 个示例

范围日历的 HeroUI v3 本地交互示例。

API 文档
滚动到此处加载 19 个 HeroUI 示例