JGuang
中
HeroUI v3.2.2local previews
84 component modules · 607 interactive examplesRendered locally with @heroui/react

Actions & selection

Buttons and direct selection controls.

11 components

按钮 / Button

13 examples

A local interactive preview of HeroUI's Button component.

API docs

Usage

OFFICIAL EXAMPLE
1 / 13
HeroUI preview

Variants

OFFICIAL EXAMPLE
2 / 13
HeroUI preview

With Icons

OFFICIAL EXAMPLE
3 / 13
HeroUI preview

Icon Only

OFFICIAL EXAMPLE
4 / 13
HeroUI preview

Loading

OFFICIAL EXAMPLE
5 / 13
HeroUI preview

Loading State

OFFICIAL EXAMPLE
6 / 13
HeroUI preview

Sizes

OFFICIAL EXAMPLE
7 / 13
HeroUI preview

Full Width

OFFICIAL EXAMPLE
8 / 13
HeroUI preview

Disabled State

OFFICIAL EXAMPLE
9 / 13
HeroUI preview

Social Buttons

OFFICIAL EXAMPLE
10 / 13
HeroUI preview

Custom Render Function

OFFICIAL EXAMPLE
11 / 13
HeroUI preview

Adding custom variants

OFFICIAL EXAMPLE
12 / 13
HeroUI preview

Adding Ripple Effect

OFFICIAL EXAMPLE
13 / 13
HeroUI preview

按钮组 / Button Group

8 examples

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

API docs
Scroll to load 8 HeroUI examples

关闭按钮 / Close Button

3 examples

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

API docs
Scroll to load 3 HeroUI examples

切换按钮 / Toggle Button

6 examples

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

API docs
Scroll to load 6 HeroUI examples

切换按钮组 / Toggle Button Group

9 examples

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

API docs
Scroll to load 9 HeroUI examples

开关 / Switch

15 examples

A local interactive preview of HeroUI's Switch component.

API docs
Scroll to load 15 HeroUI examples

开关组 / Switch Group

1 examples

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

API docs
Scroll to load 1 HeroUI examples

复选框 / Checkbox

14 examples

A local interactive preview of HeroUI's Checkbox component.

API docs
Scroll to load 14 HeroUI examples

复选框组 / Checkbox Group

9 examples

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

API docs
Scroll to load 9 HeroUI examples

单选框 / Radio

1 examples

A local interactive preview of HeroUI's Radio component.

API docs
Scroll to load 1 HeroUI examples

单选框组 / Radio Group

11 examples

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

API docs
Scroll to load 11 HeroUI examples

Forms & input

Inputs, fields, validation, and form composition.

17 components

自动完成 / Autocomplete

20 examples

A local interactive preview of HeroUI's Autocomplete component.

API docs
Scroll to load 20 HeroUI examples

组合框 / Combo Box

18 examples

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

API docs
Scroll to load 18 HeroUI examples

输入框 / Input

6 examples

A local interactive preview of HeroUI's Input component.

API docs
Scroll to load 6 HeroUI examples

输入框组 / Input Group

20 examples

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

API docs
Scroll to load 20 HeroUI examples

验证码输入 / Input OTP

10 examples

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

API docs
Scroll to load 10 HeroUI examples

多行输入框 / Text Area

6 examples

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

API docs
Scroll to load 6 HeroUI examples

文本字段 / Text Field

12 examples

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

API docs
Scroll to load 12 HeroUI examples

搜索字段 / Search Field

14 examples

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

API docs
Scroll to load 14 HeroUI examples

数字字段 / Number Field

16 examples

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

API docs
Scroll to load 16 HeroUI examples

选择器 / Select

17 examples

A local interactive preview of HeroUI's Select component.

API docs
Scroll to load 17 HeroUI examples

滑块 / Slider

5 examples

A local interactive preview of HeroUI's Slider component.

API docs
Scroll to load 5 HeroUI examples

表单 / Form

2 examples

A local interactive preview of HeroUI's Form component.

API docs
Scroll to load 2 HeroUI examples

字段组 / Fieldset

2 examples

A local interactive preview of HeroUI's Fieldset component.

API docs
Scroll to load 2 HeroUI examples

标签 / Label

1 examples

A local interactive preview of HeroUI's Label component.

API docs
Scroll to load 1 HeroUI examples

描述 / Description

1 examples

A local interactive preview of HeroUI's Description component.

API docs
Scroll to load 1 HeroUI examples

错误消息 / Error Message

1 examples

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

API docs
Scroll to load 1 HeroUI examples

字段错误 / Field Error

1 examples

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

API docs
Scroll to load 1 HeroUI examples

Color

Accessible color selection and editing controls.

7 components

颜色区域 / Color Area

6 examples

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

API docs
Scroll to load 6 HeroUI examples

颜色字段 / Color Field

12 examples

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

API docs
Scroll to load 12 HeroUI examples

颜色输入组 / Color Input Group

1 examples

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

API docs
Scroll to load 1 HeroUI examples

颜色选择器 / Color Picker

5 examples

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

API docs
Scroll to load 5 HeroUI examples

颜色滑块 / Color Slider

8 examples

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

API docs
Scroll to load 8 HeroUI examples

色板 / Color Swatch

7 examples

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

API docs
Scroll to load 7 HeroUI examples

色板选择器 / Color Swatch Picker

9 examples

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

API docs
Scroll to load 9 HeroUI examples

Date & time

Date and time entry and picker patterns.

5 components

日期字段 / Date Field

16 examples

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

API docs
Scroll to load 16 HeroUI examples

日期输入组 / Date Input Group

1 examples

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

API docs
Scroll to load 1 HeroUI examples

日期选择器 / Date Picker

9 examples

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

API docs
Scroll to load 9 HeroUI examples

日期范围选择器 / Date Range Picker

9 examples

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

API docs
Scroll to load 9 HeroUI examples

时间字段 / Time Field

14 examples

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

API docs
Scroll to load 14 HeroUI examples

Collections & data

Selectable collections, structured data, and tags.

6 components

列表框 / List Box

8 examples

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

API docs
Scroll to load 8 HeroUI examples

列表框项目 / List Box Item

1 examples

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

API docs
Scroll to load 1 HeroUI examples

列表框分组 / List Box Section

1 examples

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

API docs
Scroll to load 1 HeroUI examples

表格 / Table

12 examples

A local interactive preview of HeroUI's Table component.

API docs
Scroll to load 12 HeroUI examples

标签 / Tag

1 examples

A local interactive preview of HeroUI's Tag component.

API docs
Scroll to load 1 HeroUI examples

标签组 / Tag Group

11 examples

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

API docs
Scroll to load 11 HeroUI examples

Content display

Content, identity, typography, and visual surfaces.

10 components

头像 / Avatar

7 examples

A local interactive preview of HeroUI's Avatar component.

API docs
Scroll to load 7 HeroUI examples

徽标 / Badge

7 examples

A local interactive preview of HeroUI's Badge component.

API docs
Scroll to load 7 HeroUI examples

卡片 / Card

6 examples

A local interactive preview of HeroUI's Card component.

API docs
Scroll to load 6 HeroUI examples

标签胶囊 / Chip

4 examples

A local interactive preview of HeroUI's Chip component.

API docs
Scroll to load 4 HeroUI examples

键盘按键 / Kbd

6 examples

A local interactive preview of HeroUI's Kbd component.

API docs
Scroll to load 6 HeroUI examples

分隔线 / Separator

6 examples

A local interactive preview of HeroUI's Separator component.

API docs
Scroll to load 6 HeroUI examples

表面 / Surface

1 examples

A local interactive preview of HeroUI's Surface component.

API docs
Scroll to load 1 HeroUI examples

排版 / Typography

4 examples

A local interactive preview of HeroUI's Typography component.

API docs
Scroll to load 4 HeroUI examples

标题 / Header

1 examples

A local interactive preview of HeroUI's Header component.

API docs
Scroll to load 1 HeroUI examples

滚动阴影 / Scroll Shadow

6 examples

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

API docs
Scroll to load 6 HeroUI examples

Status & feedback

Status, progress, loading, and notification feedback.

8 components

提示 / Alert

1 examples

A local interactive preview of HeroUI's Alert component.

API docs
Scroll to load 1 HeroUI examples

进度条 / Progress Bar

6 examples

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

API docs
Scroll to load 6 HeroUI examples

环形进度 / Progress Circle

6 examples

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

API docs
Scroll to load 6 HeroUI examples

度量条 / Meter

5 examples

A local interactive preview of HeroUI's Meter component.

API docs
Scroll to load 5 HeroUI examples

骨架屏 / Skeleton

7 examples

A local interactive preview of HeroUI's Skeleton component.

API docs
Scroll to load 7 HeroUI examples

加载指示器 / Spinner

3 examples

A local interactive preview of HeroUI's Spinner component.

API docs
Scroll to load 3 HeroUI examples

空状态 / Empty State

1 examples

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

API docs
Scroll to load 1 HeroUI examples

轻提示 / Toast

9 examples

A local interactive preview of HeroUI's Toast component.

API docs
Scroll to load 9 HeroUI examples

Overlays & dialogs

Dialogs, drawers, popovers, and contextual overlays.

5 components

警告对话框 / Alert Dialog

13 examples

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

API docs
Scroll to load 13 HeroUI examples

抽屉 / Drawer

8 examples

A local interactive preview of HeroUI's Drawer component.

API docs
Scroll to load 8 HeroUI examples

模态框 / Modal

13 examples

A local interactive preview of HeroUI's Modal component.

API docs
Scroll to load 13 HeroUI examples

弹出框 / Popover

5 examples

A local interactive preview of HeroUI's Popover component.

API docs
Scroll to load 5 HeroUI examples

工具提示 / Tooltip

5 examples

A local interactive preview of HeroUI's Tooltip component.

API docs
Scroll to load 5 HeroUI examples

Disclosure

Expand and collapse related content.

3 components

手风琴 / Accordion

10 examples

A local interactive preview of HeroUI's Accordion component.

API docs
Scroll to load 10 HeroUI examples

折叠面板 / Disclosure

2 examples

A local interactive preview of HeroUI's Disclosure component.

API docs
Scroll to load 2 HeroUI examples

折叠面板组 / Disclosure Group

2 examples

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

API docs
Scroll to load 2 HeroUI examples

In progress

Publicly exported calendar modules still marked in progress upstream.

3 components

日历 / Calendar

IN PROGRESS19 examples

A local interactive preview of HeroUI's Calendar component.

API docs
Scroll to load 19 HeroUI examples

日历年份选择器 / Calendar Year Picker

IN PROGRESS1 examples

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

API docs
Scroll to load 1 HeroUI examples

范围日历 / Range Calendar

IN PROGRESS19 examples

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

API docs
Scroll to load 19 HeroUI examples