柔和的设计。 清晰的体验。

Button

具有 raised、pressed 和 primary 状态的基础操作控件。

@neumorphism-ui/button

Dialog

安全约束焦点并在关闭后将其还给原触发器的模态表面。

@neumorphism-ui/dialog

@neumorphism-ui/dropdown-menu

Dropdown Menu

支持通过键盘浏览操作、选项和 submenu 的上下文菜单。

@neumorphism-ui/alert-dialog

Alert Dialog

对不可撤销操作进行明确确认的对话框。

@neumorphism-ui/popover

Popover

依附按钮、保留上下文的设置面板。

@neumorphism-ui/hover-card

Hover Card

补充说明链接目标的预览卡片。

Sheet

从视口边缘打开的可滚动操作面板。

@neumorphism-ui/sheet

@neumorphism-ui/context-menu

Context Menu

在指针位置打开的操作菜单，支持复选、单选和子菜单。

Drawer

可通过滑动关闭的底部或侧边任务面板。

@neumorphism-ui/drawer

@neumorphism-ui/checkbox

Checkbox

支持 boolean 与 indeterminate 状态的原生复选框。

Input

focus 与 validation 状态清晰的 inset 单行输入框。

@neumorphism-ui/input

@neumorphism-ui/input-group

Input Group

将输入框、addon 和操作组合在同一 inset 表面中的复合字段。

Label

连接表单 control 名称与点击区域的原生 label。

@neumorphism-ui/label

@neumorphism-ui/radio-group

Radio Group

用于选择单一值的原生 radio input 组。

Select

保留浏览器无障碍能力的原生 select 表面。

@neumorphism-ui/select

Slider

在横向或纵向 track 上调节一个或多个值的范围控件。

@neumorphism-ui/slider

Switch

以按下的 track 呈现立即生效的开关设置。

@neumorphism-ui/switch

@neumorphism-ui/textarea

Textarea

用于输入多行文本、可调整尺寸的 inset field。

Toggle

保持按下选择状态的独立切换按钮。

@neumorphism-ui/toggle

@neumorphism-ui/toggle-group

Toggle Group

可通过键盘导航的单选或多选切换组。

Field

把控件与标签、说明和验证错误关联起来。

@neumorphism-ui/field

@neumorphism-ui/fieldset

Fieldset

为相关控件提供共用标题和禁用状态的组。

Form

协调字段验证和提交错误的原生表单。

@neumorphism-ui/form

@neumorphism-ui/number-field

Number Field

支持范围、步长和本地化格式的数字输入。

@neumorphism-ui/combobox

Combobox

支持过滤、空结果及键盘选择的搜索输入。

@neumorphism-ui/calendar

Calendar

用于单日和范围选择的新拟态日历。

@neumorphism-ui/date-picker

Date Picker

在弹出层中选择并清除日期。

@neumorphism-ui/input-otp

Input OTP

将一个真实输入与多个视觉槽位组合的验证码输入。

@neumorphism-ui/accordion

Accordion

可单独或同时展开多个区块的折叠内容组。

@neumorphism-ui/breadcrumb

Breadcrumb

以有序且有语义的列表显示当前页面的路径。

@neumorphism-ui/pagination

Pagination

明确显示当前页及上一页、下一页入口的 raised 链接组。

Tabs

在同一上下文中通过键盘切换 panel 的 tab interface。

@neumorphism-ui/tabs

@neumorphism-ui/tooltip

Tooltip

在 hover 和 keyboard focus 时提供简短辅助说明的 popup。

@neumorphism-ui/collapsible

Collapsible

展开或折叠一组可选设置的容器。

@neumorphism-ui/toolbar

Toolbar

集中呈现文档操作、支持方向键导航的工具栏。

@neumorphism-ui/menubar

Menubar

通过方向键移动的应用命令菜单。

@neumorphism-ui/command

Command

结合搜索与键盘选择的命令面板和快速导航列表。

@neumorphism-ui/carousel

Carousel

通过触控、按钮和方向键浏览的连续内容视图。

@neumorphism-ui/resizable

Resizable

可通过指针或键盘调整比例的分割面板。

@neumorphism-ui/sidebar

Sidebar

同时支持桌面折叠和移动端 Sheet 的应用导航。

Alert

通过 raised 表面传达重要状态和操作结果的消息。

@neumorphism-ui/alert

Avatar

图片加载失败时仍能显示 fallback 的头像表面。

@neumorphism-ui/avatar

Badge

以简短醒目的行内标签显示状态或分类。

@neumorphism-ui/badge

Card

以 raised、soft、inset 或 flat 层次组织内容的表面。

@neumorphism-ui/card

@neumorphism-ui/progress

Progress

以 inset 轨道和 primary 填充显示完成进度。

@neumorphism-ui/scroll-area

Scroll Area

保留浏览器原生 scrolling 的主题化 overflow 表面。

@neumorphism-ui/separator

Separator

以高光和细微阴影表现相关内容之间边界的分隔线。

@neumorphism-ui/skeleton

Skeleton

预先展示待加载内容尺寸和位置的 inset placeholder。

Table

在小屏幕上可横向滚动的语义化数据表格。

@neumorphism-ui/table

Meter

在已知范围内表示测量值的计量条。

@neumorphism-ui/meter

@neumorphism-ui/data-table

Data Table

组合搜索、筛选、排序、行选择及分页。

Toast

提供结果消息和撤销操作的通知。

@neumorphism-ui/toast

Chart

响应式图表面板、提示框和精确数据表。

@neumorphism-ui/chart

@neumorphism-ui/image-card

Image Card

将图片和说明组合在一个凸起表面上的内容卡片。