coss-particles

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

COSS UI Particles Index

COSS UI Particles 索引

Particles are copy-paste-ready UI patterns built on coss primitives. Browse them visually at https://coss.com/ui/particles.

Particles 是基于 coss primitives 构建、可直接复制粘贴的 UI 模式。可在 https://coss.com/ui/particles 直观浏览它们。

How to use this skill

如何使用此 skill

Describe the UI you need (e.g. "a form with validation", "a dialog with a form inside", "tabs with icons").
Search this index for matching particles by component type and description.
Fetch the JSON URL to get the full source code of the particle.
Adapt the particle code to your needs.

描述你需要的 UI（例如，“带验证的表单”、“内含表单的 dialog”、“带图标的 tabs”）。
按组件类型和说明在此索引中搜索匹配的 particles。
获取 JSON URL，以获取 particle 的完整源代码。
根据你的需求调整 particle 代码。

JSON URL pattern

JSON URL 格式

Each particle has a JSON manifest at:

https://coss.com/ui/r/<particle-name>.json

For example:

https://coss.com/ui/r/p-accordion-1.json

每个 particle 都有一个 JSON manifest，位置如下：

https://coss.com/ui/r/<particle-name>.json

例如：

https://coss.com/ui/r/p-accordion-1.json

Source code

源代码

Particle source files live in this repo at

apps/ui/registry/default/particles/

Particle 源文件位于此仓库的

apps/ui/registry/default/particles/

中。

Updating this index

更新此索引

Run the generator script from the coss repo root:

bash

node apps/ui/scripts/generate-particle-index.cjs

Total: 508 particles across 54 component types

在 coss 仓库根目录运行生成器脚本：

bash

node apps/ui/scripts/generate-particle-index.cjs

总计：508 个 particles，涵盖 54 种组件类型

Component types

组件类型

accordion (4)
alert (7)
alert-dialog (2)
autocomplete (16)
avatar (14)
badge (20)
breadcrumb (7)
button (40)
calendar (25)
card (11)
checkbox (5)
checkbox-group (5)
collapsible (1)
combobox (20)
command (2)
context-menu (8)
date-picker (9)
dialog (6)
drawer (14)
empty (1)
field (18)
fieldset (1)
form (2)
frame (4)
group (22)
input (19)
input-group (28)
kbd (1)
menu (9)
meter (4)
navigation (3)
number-field (11)
otp-field (9)
pagination (3)
popover (4)
preview-card (1)
progress (3)
radio-group (9)
scroll-area (5)
select (23)
separator (1)
sheet (3)
skeleton (2)
slider (23)
spinner (1)
switch (9)
table (8)
tabs (15)
textarea (15)
toast (13)
toggle (8)
toggle-group (9)
toolbar (1)
tooltip (4)

accordion (4)
alert (7)
alert-dialog (2)
autocomplete (16)
avatar (14)
badge (20)
breadcrumb (7)
button (40)
calendar (25)
card (11)
checkbox (5)
checkbox-group (5)
collapsible (1)
combobox (20)
command (2)
context-menu (8)
date-picker (9)
dialog (6)
drawer (14)
empty (1)
field (18)
fieldset (1)
form (2)
frame (4)
group (22)
input (19)
input-group (28)
kbd (1)
menu (9)
meter (4)
navigation (3)
number-field (11)
otp-field (9)
pagination (3)
popover (4)
preview-card (1)
progress (3)
radio-group (9)
scroll-area (5)
select (23)
separator (1)
sheet (3)
skeleton (2)
slider (23)
spinner (1)
switch (9)
table (8)
tabs (15)
textarea (15)
toast (13)
toggle (8)
toggle-group (9)
toolbar (1)
tooltip (4)

accordion

Basic accordion | JSON
Accordion with one panel open | JSON
Accordion allowing multiple panels open | JSON
Controlled accordion | JSON

基础 accordion | JSON
仅展开一个面板的 accordion | JSON
允许同时展开多个面板的 accordion | JSON
受控 accordion | JSON

alert

Basic alert | JSON
Alert with icon | JSON
Alert with icon and action buttons | JSON
Info alert | JSON
Success alert | JSON
Warning alert | JSON
Error alert | JSON

基础 alert | JSON
带 icon 的 alert | JSON
带 icon 和操作按钮的 alert | JSON
信息 alert | JSON
成功 alert | JSON
警告 alert | JSON
错误 alert | JSON

alert-dialog

Alert dialog | JSON
Alert dialog with bare footer | JSON

Alert dialog | JSON
带 bare footer 的 alert dialog | JSON

autocomplete

Basic autocomplete | JSON
Disabled autocomplete | JSON
Small autocomplete | JSON
Large autocomplete | JSON
Autocomplete with label | JSON
Autocomplete autofilling the input with the highlighted item | JSON
Autocomplete auto highlighting the first option | JSON
Autocomplete with clear button | JSON
Autocomplete with trigger and clear buttons | JSON
Autocomplete with grouped items | JSON
Autocomplete with limited number of results | JSON
Autocomplete with async items loading | JSON
Autocomplete form | JSON
Autocomplete form | JSON
Pill-shaped autocomplete | JSON
Address autocomplete with Google Maps Places API | JSON

基础 autocomplete | JSON
禁用状态的 autocomplete | JSON
小号 autocomplete | JSON
大号 autocomplete | JSON
带 label 的 autocomplete | JSON
自动使用高亮项填充输入框的 autocomplete | JSON
自动高亮第一个选项的 autocomplete | JSON
带清除按钮的 autocomplete | JSON
带 trigger 和清除按钮的 autocomplete | JSON
带分组项的 autocomplete | JSON
限制结果数量的 autocomplete | JSON
异步加载候选项的 autocomplete | JSON
Autocomplete form | JSON
Autocomplete form | JSON
胶囊形 autocomplete | JSON
使用 Google Maps Places API 的地址 autocomplete | JSON

avatar

Avatar with image and fallback | JSON
Fallback-only avatar | JSON
Avatars with different sizes | JSON
Avatars with different radii | JSON
Overlapping avatar group | JSON
Avatar with user icon fallback | JSON
Avatar with emerald status dot | JSON
Avatar with muted status dot | JSON
Rounded avatar with top-right emerald status | JSON
Avatar with notification badge | JSON
Rounded avatar with notification badge | JSON
Avatar with verified badge | JSON
Small overlapping avatar group | JSON
Large overlapping avatar group | JSON

带 image 和 fallback 的 avatar | JSON
仅使用 fallback 的 avatar | JSON
不同尺寸的 avatars | JSON
不同圆角的 avatars | JSON
重叠 avatar 组 | JSON
带 user icon fallback 的 avatar | JSON
带 emerald 状态点的 avatar | JSON
带 muted 状态点的 avatar | JSON
右上角带 emerald 状态的圆角 avatar | JSON
带 notification badge 的 avatar | JSON
带 notification badge 的圆角 avatar | JSON
带 verified badge 的 avatar | JSON
小型重叠 avatar 组 | JSON
大型重叠 avatar 组 | JSON

badge

Basic badge | JSON
Outline badge | JSON
Secondary badge | JSON
Destructive badge | JSON
Info badge | JSON
Success badge | JSON
Warning badge | JSON
Error badge | JSON
Small badge | JSON
Large badge | JSON
Badge with icon | JSON
Badge with link | JSON
Badge with count | JSON
Full rounded badge (pill) | JSON
Badge with number after text | JSON
Status badge - Paid | JSON
Status badge - Pending | JSON
Status badge - Failed | JSON
Selectable badge with checkbox | JSON
Removable badge | JSON

基础 badge | JSON
描边 badge | JSON
次要 badge | JSON
破坏性 badge | JSON
信息 badge | JSON
成功 badge | JSON
警告 badge | JSON
错误 badge | JSON
小号 badge | JSON
大号 badge | JSON
带 icon 的 badge | JSON
带 link 的 badge | JSON
带 count 的 badge | JSON
全圆角 badge（胶囊形） | JSON
文本后带数字的 badge | JSON
状态 badge - 已支付 | JSON
状态 badge - 待处理 | JSON
状态 badge - 失败 | JSON
带 checkbox 的可选 badge | JSON
可移除 badge | JSON

breadcrumb

Breadcrumb with menu example | JSON
Breadcrumb with custom separator | JSON
Breadcrumb with home icon for home link only | JSON
Breadcrumb with folders icon menu | JSON
Breadcrumb with icons before text | JSON
Breadcrumb with dot separators | JSON
Breadcrumb with select dropdown | JSON

带 menu 示例的 breadcrumb | JSON
使用自定义 separator 的 breadcrumb | JSON
仅为 home link 使用 home icon 的 breadcrumb | JSON
带 folders icon menu 的 breadcrumb | JSON
在 text 前显示 icon 的 breadcrumb | JSON
使用点号 separator 的 breadcrumb | JSON
带 select dropdown 的 breadcrumb | JSON

button

Default button | JSON
Outline button | JSON
Secondary button | JSON
Destructive button | JSON
Destructive outline button | JSON
Ghost button | JSON
Link button | JSON
Extra-small button | JSON
Small button | JSON
Large button | JSON
Extra-large button | JSON
Disabled button | JSON
Icon button | JSON
Small icon button | JSON
Large icon button | JSON
Button with icon | JSON
Link rendered as button | JSON
Button using the built-in loading prop | JSON
Custom loading button with manual Spinner | JSON
Expandable show more/less toggle button | JSON
Back link button with chevron | JSON
Card-style button with heading and description | JSON
Directional pad control buttons | JSON
Outline like button with count | JSON
Social login icon buttons | JSON
Star button with count badge | JSON
Button group with QR code icon and sign in | JSON
Button with avatar | JSON
Pill-shaped button with rounded-full styling | JSON
Button with animated arrow on hover | JSON
Button with keyboard shortcut indicator | JSON
Button with notification badge | JSON
Paired buttons (Cancel/Save) | JSON
Button with animated status dot | JSON
Icon-only copy button with feedback | JSON
Copy button with feedback | JSON
Rotating icon button (FAB-style toggle) | JSON
Hamburger menu button with animated icon | JSON
Download button with progress and cancel action | JSON
Social login buttons (Google, X, GitHub) | JSON

默认 button | JSON
描边 button | JSON
次要 button | JSON
破坏性 button | JSON
破坏性描边 button | JSON
Ghost button | JSON
链接 button | JSON
超小号 button | JSON
小号 button | JSON
大号 button | JSON
超大号 button | JSON
禁用 button | JSON
Icon button | JSON
小号 icon button | JSON
大号 icon button | JSON
带 icon 的 button | JSON
以 button 形式渲染的 link | JSON
使用内置 loading prop 的 button | JSON
使用手动 Spinner 的自定义 loading button | JSON
可展开的“显示更多/显示更少”切换 button | JSON
带 chevron 的返回 link button | JSON
带标题和描述的 card 风格 button | JSON
方向 pad 控制 button | JSON
带 count 的描边点赞 button | JSON
社交登录 icon button | JSON
带 count badge 的星标 button | JSON
带 QR code icon 和登录操作的 button group | JSON
带 avatar 的 button | JSON
使用 rounded-full 样式的胶囊形 button | JSON
hover 时带动画箭头的 button | JSON
带键盘快捷键指示的 button | JSON
带 notification badge 的 button | JSON
成对 button（取消/保存） | JSON
带动画状态点的 button | JSON
仅含 icon 且带反馈的复制 button | JSON
带反馈的复制 button | JSON
旋转 icon button（FAB 风格 toggle） | JSON
带动画 icon 的汉堡菜单 button | JSON
带进度和取消操作的下载 button | JSON
社交登录 button（Google、X、GitHub） | JSON

calendar

Basic calendar | JSON
Calendar with date range selection | JSON
Calendar with month/year dropdown navigation | JSON
Calendar with custom Select dropdown for month/year | JSON
Calendar with Combobox dropdown for month/year | JSON
Calendar with disabled dates | JSON
Calendar with multiple date selection | JSON
Calendar with custom cell size | JSON
Calendar with rounded day buttons | JSON
Calendar with rounded range selection style | JSON
Calendar with right-aligned navigation | JSON
Calendar with week numbers | JSON
Calendar with year-only combobox dropdown | JSON
Calendar without arrow navigation (dropdown only) | JSON
Calendar with current month button | JSON
Calendar with today button | JSON
Calendar with date input | JSON
Calendar with time input | JSON
Calendar with time slots (appointment picker) | JSON
Calendar with date presets | JSON
Range calendar with date presets | JSON
Two months calendar | JSON
Three months calendar | JSON
Pricing calendar with custom day buttons | JSON
Calendar with 24-hour autocomplete time input | JSON

基础 calendar | JSON
带 date range selection 的 calendar | JSON
带 month/year dropdown navigation 的 calendar | JSON
使用自定义 Select dropdown 选择 month/year 的 calendar | JSON
使用 Combobox dropdown 选择 month/year 的 calendar | JSON
带 disabled dates 的 calendar | JSON
支持 multiple date selection 的 calendar | JSON
使用自定义 cell size 的 calendar | JSON
带 rounded day buttons 的 calendar | JSON
使用 rounded range selection style 的 calendar | JSON
带 right-aligned navigation 的 calendar | JSON
带 week numbers 的 calendar | JSON
带 year-only combobox dropdown 的 calendar | JSON
无 arrow navigation、仅使用 dropdown 的 calendar | JSON
带 current month button 的 calendar | JSON
带 today button 的 calendar | JSON
带 date input 的 calendar | JSON
带 time input 的 calendar | JSON
带 time slots 的 calendar（appointment picker） | JSON
带 date presets 的 calendar | JSON
带 date presets 的 range calendar | JSON
双月 calendar | JSON
三月 calendar | JSON
使用自定义 day buttons 的 pricing calendar | JSON
带 24-hour autocomplete time input 的 calendar | JSON

card

A basic card with header and footer | JSON
Authentication card with actions | JSON
Authentication card with separators | JSON
Framed card with footer | JSON
Framed card with header | JSON
Framed card with header and footer | JSON
Framed card with no rounded bottom | JSON
Card within a frame and footer | JSON
Card within a frame and footer | JSON
Card within a frame with header and footer | JSON
CardFrame with header action | JSON

带 header 和 footer 的基础 card | JSON
带操作按钮的 authentication card | JSON
带分隔线的 authentication card | JSON
带 footer 的 framed card | JSON
带 header 的 framed card | JSON
带 header 和 footer 的 framed card | JSON
底部无圆角的 framed card | JSON
位于 frame 内且带 footer 的 card | JSON
位于 frame 内且带 footer 的 card | JSON
位于 frame 内且带 header 和 footer 的 card | JSON
带 header action 的 CardFrame | JSON

checkbox

Basic checkbox | JSON
Disabled checkbox | JSON
Checkbox with description | JSON
Card-style checkbox | JSON
Checkbox form | JSON

基础 checkbox | JSON
禁用的 checkbox | JSON
带 description 的 checkbox | JSON
Card 风格 checkbox | JSON
Checkbox form | JSON

checkbox-group

Basic checkbox group | JSON
Checkbox group with disabled items | JSON
Checkbox group with parent checkbox | JSON
Nested checkbox group with parent | JSON
Checkbox group form | JSON

基础 checkbox group | JSON
带 disabled items 的 checkbox group | JSON
带 parent checkbox 的 checkbox group | JSON
带 parent 的嵌套 checkbox group | JSON
Checkbox group form | JSON

collapsible

Basic collapsible | JSON

基础 collapsible | JSON

combobox

Basic combobox | JSON
Disabled combobox | JSON
Small combobox | JSON
Large combobox | JSON
Combobox with label | JSON
Combobox auto highlighting the first option | JSON
Combobox with clear button | JSON
Combobox with grouped items | JSON
Combobox with multiple selection | JSON
Combobox with input inside popup | JSON
Combobox form | JSON
Combobox multiple form | JSON
Combobox with start addon | JSON
Combobox multiple with start addon | JSON
Pill-shaped combobox | JSON
Timezone combobox | JSON
Timezone combobox with search input | JSON
Combobox with select trigger | JSON
Combobox multiple with stacked chips | JSON
Combobox multiple with stacked divided chips | JSON

基础 combobox | JSON
禁用 combobox | JSON
小号 combobox | JSON
大号 combobox | JSON
带 label 的 combobox | JSON
自动高亮第一个选项的 combobox | JSON
带清除按钮的 combobox | JSON
带分组项的 combobox | JSON
支持 multiple selection 的 combobox | JSON
Popup 内含 input 的 combobox | JSON
Combobox form | JSON
Combobox multiple form | JSON
带 start addon 的 combobox | JSON
带 start addon 的 multiple combobox | JSON
胶囊形 combobox | JSON
Timezone combobox | JSON
带 search input 的 timezone combobox | JSON
带 select trigger 的 combobox | JSON
带 stacked chips 的 multiple combobox | JSON
带 stacked divided chips 的 multiple combobox | JSON

command

Command palette with dialog | JSON
Command palette with AI assistant | JSON

带 dialog 的 command palette | JSON
带 AI assistant 的 command palette | JSON

context-menu

Basic context menu | JSON
Context menu with link items | JSON
Nested context menu | JSON
Context menu with checkbox items | JSON
Context menu with group labels | JSON
Context menu with icons | JSON
Context menu with radio group | JSON
Context menu with switch checkbox items | JSON

基础 context menu | JSON
带 link items 的 context menu | JSON
嵌套 context menu | JSON
带 checkbox items 的 context menu | JSON
带 group labels 的 context menu | JSON
带 icons 的 context menu | JSON
带 radio group 的 context menu | JSON
带 switch checkbox items 的 context menu | JSON

date-picker

Basic date picker | JSON
Date range picker | JSON
Two months calendar with range date | JSON
Date picker with field and dropdown navigation | JSON
Date picker with presets | JSON
Date picker with input | JSON
Date picker that closes on select | JSON
Multiple dates picker | JSON
Date picker with select-like trigger | JSON

基础 date picker | JSON
Date range picker | JSON
带 range date 的双月 calendar | JSON
带 field 和 dropdown navigation 的 date picker | JSON
带 presets 的 date picker | JSON
带 input 的 date picker | JSON
选择后自动关闭的 date picker | JSON
Multiple dates picker | JSON
带 select-like trigger 的 date picker | JSON

dialog

Dialog with form | JSON
Dialog with bare footer | JSON
Dialog opened from menu | JSON
Nested dialogs | JSON
Dialog with close confirmation | JSON
Dialog with long content | JSON

带 form 的 dialog | JSON
带 bare footer 的 dialog | JSON
从 menu 打开的 dialog | JSON
嵌套 dialogs | JSON
带 close confirmation 的 dialog | JSON
带 long content 的 dialog | JSON

drawer

Simple bottom drawer with close button | JSON
Bottom drawer without drag bar | JSON
Drawer with close button | JSON
Inset variant drawers for all four positions | JSON
Straight variant drawers for all four positions | JSON
Scrollable content with terms and conditions | JSON
Nested bottom drawers with centered content | JSON
Nested right drawers with inset variant | JSON
Bottom drawer with snap points | JSON
Edit profile form with default and bare footer variants | JSON
Mobile menu drawer from the left | JSON
Responsive edit profile: dialog on desktop, drawer on mobile | JSON
Responsive actions menu: menu on desktop, drawer on mobile | JSON
Left drawer with swipe area | JSON

带 close button 的简单底部 drawer | JSON
无 drag bar 的底部 drawer | JSON
带 close button 的 drawer | JSON
四个位置均使用 inset variant 的 drawers | JSON
四个位置均使用 straight variant 的 drawers | JSON
带条款与条件的可滚动 content 的 drawer | JSON
内容居中的嵌套底部 drawers | JSON
使用 inset variant 的嵌套右侧 drawers | JSON
带 snap points 的底部 drawer | JSON
包含 default 和 bare footer variants 的 edit profile form | JSON
从左侧打开的移动端 menu drawer | JSON
响应式 edit profile：desktop 使用 dialog，mobile 使用 drawer | JSON
响应式 actions menu：desktop 使用 menu，mobile 使用 drawer | JSON
带 swipe area 的左侧 drawer | JSON

empty

Empty state with icon and actions | JSON

带 icon 和操作按钮的 empty state | JSON

field

Field with description | JSON
Field with required indicator | JSON
Field in disabled state | JSON
Field showing validation error | JSON
Show field validity state | JSON
Input group with field | JSON
Field with autocomplete | JSON
Field with combobox | JSON
Field with multiple selection combobox | JSON
Field with textarea | JSON
Field with select | JSON
Field with checkbox | JSON
Field with checkbox group | JSON
Field with radio group | JSON
Field with toggle switch | JSON
Field with slider | JSON
Field with number field | JSON
Complete form built with field | JSON

带 description 的 field | JSON
带 required indicator 的 field | JSON
Disabled 状态下的 field | JSON
显示 validation error 的 field | JSON
展示 field validity state | JSON
与 input group 组合的 field | JSON
带 autocomplete 的 field | JSON
带 combobox 的 field | JSON
带 multiple selection combobox 的 field | JSON
带 textarea 的 field | JSON
带 select 的 field | JSON
带 checkbox 的 field | JSON
带 checkbox group 的 field | JSON
带 radio group 的 field | JSON
带 toggle switch 的 field | JSON
带 slider 的 field | JSON
带 number field 的 field | JSON
使用 field 构建的完整 form | JSON

fieldset

Fieldset with multiple fields | JSON

包含多个 fields 的 fieldset | JSON

form

Input in a form | JSON
Form with zod validation | JSON

Form 中的 input | JSON
使用 zod validation 的 form | JSON

frame

Basic frame | JSON
Frame with multiple separated panels | JSON
Frame with multiple stacked panels | JSON
Frame with collapsible content and delete button | JSON

基础 frame | JSON
带多个分隔 panels 的 frame | JSON
带多个堆叠 panels 的 frame | JSON
带 collapsible content 和 delete button 的 frame | JSON

group

Basic group | JSON
Group with input | JSON
Small group | JSON
Large group | JSON
Group with disabled button | JSON
Group with default button | JSON
Group with start text | JSON
Group with end text | JSON
Vertical group | JSON
Nested groups | JSON
Group with popup | JSON
Group with input group | JSON
Group with menu | JSON
Group with select | JSON
Group with search | JSON
Group with add button and input | JSON
Group with input and currency text | JSON
Group with select and input | JSON
Group with input and select | JSON
Group with input and text button | JSON
Group with two number inputs for range | JSON
Group with filter label, combobox multi-select, and remove button | JSON

基础 group | JSON
带 input 的 group | JSON
小号 group | JSON
大号 group | JSON
带 disabled button 的 group | JSON
带 default button 的 group | JSON
带 start text 的 group | JSON
带 end text 的 group | JSON
垂直 group | JSON
嵌套 groups | JSON
带 popup 的 group | JSON
带 input group 的 group | JSON
带 menu 的 group | JSON
带 select 的 group | JSON
带 search 的 group | JSON
带 add button 和 input 的 group | JSON
带 input 和 currency text 的 group | JSON
带 select 和 input 的 group | JSON
带 input 和 text button 的 group | JSON
使用两个 number inputs 选择 range 的 group | JSON
带 filter label、combobox multi-select 和 remove button 的 group | JSON

input

Basic input | JSON
Small input | JSON
Large input | JSON
Disabled input | JSON
File input | JSON
Input with label | JSON
Input with button using Group | JSON
Input with start text and end tooltip | JSON
Password input with toggle visibility | JSON
Input group mimicking a URL bar | JSON
Input group with keyboard shortcut | JSON
Input group with start loading spinner | JSON
Input with label and required indicator | JSON
Input with optional label | JSON
Input with custom border and background | JSON
Input group with end loading spinner | JSON
Read-only input | JSON
Input with characters remaining counter | JSON
Pill-shaped input | JSON

基础 input | JSON
小号 input | JSON
大号 input | JSON
禁用 input | JSON
File input | JSON
带 label 的 input | JSON
使用 Group 实现 button 的 input | JSON
带 start text 和 end tooltip 的 input | JSON
可切换可见性的 password input | JSON
模拟 URL bar 的 input group | JSON
带键盘快捷键的 input group | JSON
带 start loading spinner 的 input group | JSON
带 label 和 required indicator 的 input | JSON
带 optional label 的 input | JSON
使用自定义 border 和 background 的 input | JSON
带 end loading spinner 的 input group | JSON
Read-only input | JSON
带剩余字符计数器的 input | JSON
胶囊形 input | JSON

input-group

Basic input group | JSON
Input group with end icon | JSON
Input group with start text | JSON
Input group with end text | JSON
Input group with start and end text | JSON
Input group with number field | JSON
Input group with end tooltip | JSON
Input group with icon button | JSON
Input group with button | JSON
Input group with badge | JSON
Input group with keyboard shortcut | JSON
Input group with inner label | JSON
Small input group | JSON
Large input group | JSON
Disabled input group | JSON
Input group with loading spinner | JSON
Input group with textarea | JSON
Input group with badge and menu | JSON
Mini editor built with input group and toggle | JSON
Input group with search icon | JSON
Input group with start tooltip | JSON
Input group with clear button | JSON
Search input group with loader and voice button | JSON
Input group with character counter | JSON
Password input with strength indicator | JSON
Code snippet input with language selector | JSON
Message composer with attachment buttons | JSON
Chat input with voice and send buttons | JSON

基础 input group | JSON
带 end icon 的 input group | JSON
带 start text 的 input group | JSON
带 end text 的 input group | JSON
同时带 start 和 end text 的 input group | JSON
带 number field 的 input group | JSON
带 end tooltip 的 input group | JSON
带 icon button 的 input group | JSON
带 button 的 input group | JSON
带 badge 的 input group | JSON
带键盘快捷键的 input group | JSON
带 inner label 的 input group | JSON
小号 input group | JSON
大号 input group | JSON
禁用 input group | JSON
带 loading spinner 的 input group | JSON
带 textarea 的 input group | JSON
带 badge 和 menu 的 input group | JSON
使用 input group 和 toggle 构建的 mini editor | JSON
带 search icon 的 input group | JSON
带 start tooltip 的 input group | JSON
带 clear button 的 input group | JSON
带 loader 和 voice button 的 search input group | JSON
带字符计数器的 input group | JSON
带强度指示器的 password input | JSON
带语言选择器的 code snippet input | JSON
带附件按钮的 message composer | JSON
带 voice 和 send 按钮的 chat input | JSON

kbd

Keyboard shortcuts display | JSON

键盘快捷键 display | JSON

meter

Basic meter | JSON
Simple meter | JSON
Meter with formatted value | JSON
Meter with range | JSON

基础 meter | JSON
简单 meter | JSON
带格式化 value 的 meter | JSON
带 range 的 meter | JSON

navigation

Segmented navigation built with links | JSON
Small segmented navigation built with links | JSON
Large segmented navigation built with links | JSON

使用 links 构建的 segmented navigation | JSON
使用 links 构建的小号 segmented navigation | JSON
使用 links 构建的大号 segmented navigation | JSON

number-field

Basic number field | JSON
Small number field | JSON
Large number field | JSON
Disabled number field | JSON
Number field with label | JSON
Number field with scrub | JSON
Number field with range | JSON
Number field with formatted value | JSON
Number field with step | JSON
Number field in form | JSON
Pill-shaped number field | JSON

基础 number field | JSON
小号 number field | JSON
大号 number field | JSON
禁用 number field | JSON
带 label 的 number field | JSON
带 scrub 的 number field | JSON
带 range 的 number field | JSON
带格式化 value 的 number field | JSON
带 step 的 number field | JSON
Form 中的 number field | JSON
胶囊形 number field | JSON

otp-field

Basic OTP field | JSON
Large OTP field | JSON
OTP field with separator | JSON
OTP field with label | JSON
OTP field with custom sanitization | JSON
OTP field with auto validation | JSON
Alphanumeric OTP field | JSON
OTP field with placeholder hints | JSON
Masked OTP field | JSON

基础 OTP field | JSON
大号 OTP field | JSON
带 separator 的 OTP field | JSON
带 label 的 OTP field | JSON
带自定义 sanitization 的 OTP field | JSON
带 auto validation 的 OTP field | JSON
字母数字型 OTP field | JSON
带 placeholder hints 的 OTP field | JSON
Masked OTP field | JSON

pagination

Pagination example | JSON
Pagination with previous and next buttons only | JSON
Pagination with select, and previous and next buttons | JSON

Pagination 示例 | JSON
仅带 previous 和 next 按钮的 pagination | JSON
带 select、previous 和 next 按钮的 pagination | JSON

popover

Popover with a form | JSON
Popover with close button | JSON
Animated popovers | JSON
Split button with popover to confirm multiple occurrences | JSON

带 form 的 popover | JSON
带 close button 的 popover | JSON
动画 popovers | JSON
使用 popover 确认多次出现的 split button | JSON

preview-card

Preview card with popup | JSON

带 popup 的 preview card | JSON

progress

Basic progress bar | JSON
Progress with label and value | JSON
Progress with formatted value | JSON

基础 progress bar | JSON
带 label 和 value 的 progress | JSON
带格式化 value 的 progress | JSON

radio-group

Basic radio group | JSON
Disabled radio group | JSON
Radio group with description | JSON
Radio group card | JSON
Radio group in form | JSON
Theme selector with image cards | JSON
Small segmented control built with a radio group | JSON
Segmented control built with a radio group | JSON
Large segmented control built with a radio group | JSON

基础 radio group | JSON
禁用 radio group | JSON
带 description 的 radio group | JSON
Card 风格 radio group | JSON
Form 中的 radio group | JSON
使用 image cards 的 theme selector | JSON
使用 radio group 构建的小号 segmented control | JSON
使用 radio group 构建的 segmented control | JSON
使用 radio group 构建的大号 segmented control | JSON

scroll-area

Basic scroll area | JSON
Horizontal scroll area | JSON
Scroll area with both directions | JSON
Scroll area with fading edges | JSON
Horizontal scroll area with scrollbar gutter | JSON

基础 scroll area | JSON
水平 scroll area | JSON
支持双向滚动的 scroll area | JSON
带 fading edges 的 scroll area | JSON
带 scrollbar gutter 的水平 scroll area | JSON

select

Basic select | JSON
Small select | JSON
Large select | JSON
Disabled select | JSON
Select without item alignment | JSON
Select with groups | JSON
Multiple select | JSON
Select with icon | JSON
Select options with icon | JSON
Select with object values | JSON
Select with disabled items | JSON
Timezone select | JSON
Status select with colored dot | JSON
Pill-shaped select trigger | JSON
Select with left text label | JSON
Select with country flags | JSON
Select with description in options only | JSON
Select with avatars | JSON
Rich select with avatars and usernames | JSON
Auto width select | JSON
Select with custom border and background | JSON
Select with label | JSON
Select in form | JSON

基础 select | JSON
小号 select | JSON
大号 select | JSON
禁用 select | JSON
无 item alignment 的 select | JSON
带 groups 的 select | JSON
Multiple select | JSON
带 icon 的 select | JSON
带 icon 的 select options | JSON
使用 object values 的 select | JSON
带 disabled items 的 select | JSON
Timezone select | JSON
带彩色圆点的状态 select | JSON
胶囊形 select trigger | JSON
带左侧 text label 的 select | JSON
带 country flags 的 select | JSON
仅在 options 中包含 description 的 select | JSON
带 avatars 的 select | JSON
带 avatars 和 usernames 的 rich select | JSON
Auto width select | JSON
使用自定义 border 和 background 的 select | JSON
带 label 的 select | JSON
Form 中的 select | JSON

separator

Separator with horizontal and vertical orientations | JSON

同时包含水平和垂直方向的 separator | JSON

sheet

Basic sheet | JSON
Sheet inset | JSON
Sheet position | JSON

基础 sheet | JSON
Inset sheet | JSON
Sheet position | JSON

skeleton

Basic skeleton | JSON
Skeleton only | JSON

基础 skeleton | JSON
仅含 skeleton | JSON

slider

Basic slider | JSON
Slider with label and value | JSON
Disabled slider | JSON
Slider with reference labels | JSON
Slider with ticks | JSON
Slider with labels above | JSON
Range slider | JSON
Slider with 3 thumbs | JSON
Range slider with collision behavior none | JSON
Range slider with collision behavior swap | JSON
Slider with icons | JSON
Slider with input | JSON
Range slider with inputs | JSON
Slider with increment and decrement buttons | JSON
Price range slider | JSON
Emoji rating slider | JSON
Vertical slider | JSON
Vertical range slider | JSON
Vertical slider with input | JSON
Equalizer with vertical sliders | JSON
Object position sliders with reset | JSON
Price slider with histogram | JSON
Slider in form | JSON

基础 slider | JSON
带 label 和 value 的 slider | JSON
禁用 slider | JSON
带 reference labels 的 slider | JSON
带 ticks 的 slider | JSON
Labels 位于上方的 slider | JSON
Range slider | JSON
带 3 个 thumbs 的 slider | JSON
使用 none collision behavior 的 range slider | JSON
使用 swap collision behavior 的 range slider | JSON
带 icons 的 slider | JSON
带 input 的 slider | JSON
带 inputs 的 range slider | JSON
带 increment 和 decrement 按钮的 slider | JSON
Price range slider | JSON
Emoji rating slider | JSON
垂直 slider | JSON
垂直 range slider | JSON
带 input 的垂直 slider | JSON
使用垂直 sliders 的 equalizer | JSON
带 reset 的 object position sliders | JSON
带 histogram 的 price slider | JSON
Form 中的 slider | JSON

spinner

Basic spinner | JSON

基础 spinner | JSON

switch

Basic switch | JSON
Disabled switch | JSON
Switch with description | JSON
Switch card | JSON
Switch in form | JSON
Custom size switch | JSON
Weekly availability editor with time range combobox pickers | JSON
Weekly availability editor with grouped time range controls | JSON
Weekly availability editor with From/To labeled time groups | JSON

基础 switch | JSON
禁用 switch | JSON
带 description 的 switch | JSON
Card 风格 switch | JSON
Form 中的 switch | JSON
自定义尺寸的 switch | JSON
使用 time range combobox pickers 的 weekly availability editor | JSON
使用 grouped time range controls 的 weekly availability editor | JSON
使用 From/To labeled time groups 的 weekly availability editor | JSON

table

Basic table | JSON
Frame with card-style table | JSON
Table with TanStack Table and checkboxes | JSON
Table with TanStack Table, sorting, and pagination | JSON
Card-style table variant | JSON
CardFrame with card-style table | JSON
CardFrame with TanStack Table and checkboxes | JSON
CardFrame with TanStack Table, sorting, and pagination | JSON

基础 table | JSON
带 card-style table 的 frame | JSON
使用 TanStack Table 和 checkboxes 的 table | JSON
使用 TanStack Table、sorting 和 pagination 的 table | JSON
Card-style table variant | JSON
带 card-style table 的 CardFrame | JSON
使用 TanStack Table 和 checkboxes 的 CardFrame | JSON
使用 TanStack Table、sorting 和 pagination 的 CardFrame | JSON

tabs

Segmented control built with tabs | JSON
Tabs with underline | JSON
Vertical tabs | JSON
Vertical tabs with underline | JSON
Tabs with full rounded triggers | JSON
Tabs with icon before name | JSON
Tabs with icon before name and underline | JSON
Tabs with icon only | JSON
Tabs with underline and icon on top | JSON
Tabs with count badge | JSON
Vertical tabs with underline and icon before name | JSON
Tabs with icon only and count badge | JSON
Tabs with icon only and grouped tooltips | JSON
Small segmented control built with tabs | JSON
Large segmented control built with tabs | JSON

使用 tabs 构建的 segmented control | JSON
带 underline 的 tabs | JSON
垂直 tabs | JSON
带 underline 的垂直 tabs | JSON
带全圆角 triggers 的 tabs | JSON
Icon 位于名称前的 tabs | JSON
Icon 位于名称前且带 underline 的 tabs | JSON
仅含 icon 的 tabs | JSON
带 underline 且 icon 位于顶部的 tabs | JSON
带 count badge 的 tabs | JSON
带 underline 且 icon 位于名称前的垂直 tabs | JSON
仅含 icon 且带 count badge 的 tabs | JSON
仅含 icon 且带 grouped tooltips 的 tabs | JSON
使用 tabs 构建的小号 segmented control | JSON
使用 tabs 构建的大号 segmented control | JSON

textarea

Basic textarea | JSON
Small textarea | JSON
Large textarea | JSON
Disabled textarea | JSON
Textarea with label | JSON
Textarea in form | JSON
Textarea with label and required indicator | JSON
Textarea with optional label | JSON
Textarea with custom border and background | JSON
Read-only textarea | JSON
Textarea with characters remaining counter | JSON
Textarea field with required indicator | JSON
Shorter textarea with fixed height | JSON
Textarea with button aligned right | JSON
Textarea with button aligned left | JSON

基础 textarea | JSON
小号 textarea | JSON
大号 textarea | JSON
禁用 textarea | JSON
带 label 的 textarea | JSON
Form 中的 textarea | JSON
带 label 和 required indicator 的 textarea | JSON
带 optional label 的 textarea | JSON
使用自定义 border 和 background 的 textarea | JSON
Read-only textarea | JSON
带剩余字符计数器的 textarea | JSON
带 required indicator 的 textarea field | JSON
使用固定高度的较矮 textarea | JSON
按钮右对齐的 textarea | JSON
按钮左对齐的 textarea | JSON

toast

Default stacked toast with title and description | JSON
Stacked toasts by semantic type (success, error, info, warning) | JSON
Loading-state stacked toast | JSON
Stacked toast with primary action (undo) | JSON
Promise-based stacked toast | JSON
Stacked toasts with varying content height | JSON
Anchored tooltip-style toast after copy | JSON
Anchored error toast after async failure | JSON
Long-running promise toast with cancel | JSON
Deduplicated success toast | JSON
Deduplicated error toast | JSON
Anchored deduplicated success toast | JSON
Anchored deduplicated error toast | JSON

默认 stacked toast，带 title 和 description | JSON
按语义类型（成功、错误、信息、警告）堆叠的 toasts | JSON
Loading-state stacked toast | JSON
带 primary action（撤销）的 stacked toast | JSON
基于 Promise 的 stacked toast | JSON
内容高度不同的 stacked toasts | JSON
复制后显示的锚定 tooltip 风格 toast | JSON
异步失败后显示的锚定错误 toast | JSON
带取消操作的长时运行 Promise toast | JSON
去重的成功 toast | JSON
去重的错误 toast | JSON
锚定的去重成功 toast | JSON
锚定的去重错误 toast | JSON

toggle

Basic toggle | JSON
Toggle with outline | JSON
Toggle with icon | JSON
Small toggle | JSON
Large toggle | JSON
Disabled toggle | JSON
Toggle icon group | JSON
Bookmark toggle with tooltip and success toast | JSON

基础 toggle | JSON
描边 toggle | JSON
带 icon 的 toggle | JSON
小号 toggle | JSON
大号 toggle | JSON
禁用 toggle | JSON
Icon group toggle | JSON
带 tooltip 和成功 toast 的 bookmark toggle | JSON

toggle-group

Basic toggle group | JSON
Small toggle group | JSON
Large toggle group | JSON
Toggle group with outline | JSON
Vertical toggle group with outline | JSON
Disabled toggle group | JSON
Toggle group with disabled item | JSON
Multiple selection toggle group | JSON
Toggle group with tooltips | JSON

基础 toggle group | JSON
小号 toggle group | JSON
大号 toggle group | JSON
描边 toggle group | JSON
带 outline 的垂直 toggle group | JSON
禁用 toggle group | JSON
带 disabled item 的 toggle group | JSON
支持 multiple selection 的 toggle group | JSON
带 tooltips 的 toggle group | JSON

toolbar

Toolbar with toggles, buttons, and select | JSON

带 toggles、buttons 和 select 的 toolbar | JSON

tooltip

Basic tooltip | JSON
Grouped tooltips | JSON
Toggle group animated tooltip | JSON
Vertical group with animated tooltip | JSON

基础 tooltip | JSON
Grouped tooltips | JSON
Toggle group animated tooltip | JSON
Vertical group with animated tooltip | JSON