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原语构建的可直接复制粘贴的UI模式,你可以在https://coss.com/ui/particles直观浏览所有particle。

How to use this skill

使用指南

  1. Describe the UI you need (e.g. "a form with validation", "a dialog with a form inside", "tabs with icons").
  2. Search this index for matching particles by component type and description.
  3. Fetch the JSON URL to get the full source code of the particle.
  4. Adapt the particle code to your needs.
  1. 描述你需要的UI(例如「带校验的表单」、「内嵌表单的弹窗」、「带图标的标签页」)。
  2. 按组件类型和描述在本索引中搜索匹配的particle。
  3. 获取JSON链接得到particle的完整源码。
  4. 根据你的需求适配particle代码。

JSON URL pattern

JSON链接规则

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清单地址格式如下:
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: 474 particles across 52 component types
在coss仓库根目录运行生成脚本:
bash
node apps/ui/scripts/generate-particle-index.cjs
总计:覆盖52种组件类型,共474个particle

Component types

组件类型



accordion

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

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
  • 带图标alert | JSON
  • 带图标和操作按钮alert | JSON
  • 信息提示alert | JSON
  • 成功提示alert | JSON
  • 警告提示alert | JSON
  • 错误提示alert | JSON

alert-dialog

alert-dialog

  • Alert dialog | JSON
  • Alert dialog with bare footer | JSON
  • Alert dialog | JSON
  • 极简底部栏alert dialog | JSON

autocomplete

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
  • 基础autocomplete | JSON
  • 禁用状态autocomplete | JSON
  • 小尺寸autocomplete | JSON
  • 大尺寸autocomplete | JSON
  • 带标签autocomplete | JSON
  • 选中项自动填充输入框autocomplete | JSON
  • 自动高亮第一个选项autocomplete | JSON
  • 带清除按钮autocomplete | JSON
  • 带触发按钮和清除按钮autocomplete | JSON
  • 选项分组autocomplete | JSON
  • 限制结果数量autocomplete | JSON
  • 异步加载选项autocomplete | JSON
  • Autocomplete表单 | JSON
  • Autocomplete表单 | JSON
  • 胶囊形autocomplete | JSON

avatar

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
  • 带图片和兜底展示avatar | JSON
  • 仅兜底展示avatar | JSON
  • 不同尺寸avatar | JSON
  • 不同圆角avatar | JSON
  • 重叠头像组 | JSON
  • 用户图标兜底avatar | JSON
  • 带翠绿色状态点avatar | JSON
  • 带 muted 状态点avatar | JSON
  • 右上角带翠绿色状态的圆角avatar | JSON
  • 带通知徽章avatar | JSON
  • 带通知徽章的圆角avatar | JSON
  • 带认证徽章avatar | JSON
  • 小尺寸重叠头像组 | JSON
  • 大尺寸重叠头像组 | JSON

badge

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
  • 带图标badge | JSON
  • 带链接badge | JSON
  • 带计数badge | JSON
  • 全圆角胶囊badge | JSON
  • 文本后带数字badge | JSON
  • 状态badge - 已支付 | JSON
  • 状态badge - 待处理 | JSON
  • 状态badge - 失败 | JSON
  • 带checkbox的可选择badge | JSON
  • 可移除badge | JSON

breadcrumb

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
  • 带菜单示例breadcrumb | JSON
  • 自定义分隔符breadcrumb | JSON
  • 仅首页链接带首页图标breadcrumb | JSON
  • 带文件夹图标菜单breadcrumb | JSON
  • 文本前带图标breadcrumb | JSON
  • 点分隔符breadcrumb | JSON
  • 带选择下拉框breadcrumb | JSON

button

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
  • 幽灵button | JSON
  • 链接样式button | JSON
  • 超小尺寸button | JSON
  • 小尺寸button | JSON
  • 大尺寸button | JSON
  • 超大尺寸button | JSON
  • 禁用状态button | JSON
  • 图标button | JSON
  • 小尺寸图标button | JSON
  • 大尺寸图标button | JSON
  • 带图标button | JSON
  • 渲染为button的链接 | JSON
  • 使用内置loading属性的button | JSON
  • 手动引入Spinner的自定义加载button | JSON
  • 可展开的显示更多/收起切换button | JSON
  • 带返回箭头的链接button | JSON
  • 带标题和说明的卡片样式button | JSON
  • 方向键控制button | JSON
  • 带计数的描边点赞button | JSON
  • 社交登录图标button | JSON
  • 带计数徽章的星级button | JSON
  • 带二维码图标和登录功能的button组 | JSON
  • 带avatar的button | JSON
  • 全圆角胶囊样式button | JSON
  • hover时带动画箭头的button | JSON
  • 带快捷键提示的button | JSON
  • 带通知徽章的button | JSON
  • 配对button(取消/保存) | JSON
  • 带动画状态点的button | JSON
  • 带操作反馈的仅图标复制button | JSON
  • 带操作反馈的复制button | JSON
  • 旋转图标button(FAB样式切换) | JSON
  • 带动画图标的汉堡菜单button | JSON
  • 带进度和取消操作的下载button | JSON
  • 社交登录button(Google、X、GitHub) | JSON

calendar

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 | JSON
  • 带日期范围选择的calendar | JSON
  • 带月/年下拉导航的calendar | JSON
  • 自定义月/年Select下拉的calendar | JSON
  • 月/年选择使用Combobox下拉的calendar | JSON
  • 带禁用日期的calendar | JSON
  • 支持多选日期的calendar | JSON
  • 自定义单元格尺寸的calendar | JSON
  • 日期按钮为圆角的calendar | JSON
  • 范围选择样式为圆角的calendar | JSON
  • 导航右对齐的calendar | JSON
  • 带周数的calendar | JSON
  • 仅年选择Combobox下拉的calendar | JSON
  • 无箭头导航(仅下拉)的calendar | JSON
  • 带回到当月按钮的calendar | JSON
  • 带回到今天按钮的calendar | JSON
  • 带日期输入框的calendar | JSON
  • 带时间输入框的calendar | JSON
  • 带时间段(预约选择器)的calendar | JSON
  • 带日期预设的calendar | JSON
  • 带日期预设的范围选择calendar | JSON
  • 双月展示calendar | JSON
  • 三月展示calendar | JSON
  • 带自定义日期按钮的定价calendar | JSON

card

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
  • 带头部和底部的基础card | JSON
  • 带操作按钮的登录认证card | JSON
  • 带分隔线的登录认证card | JSON
  • 带底部栏的边框card | JSON
  • 带头部的边框card | JSON
  • 带头部和底部栏的边框card | JSON
  • 底部无圆角的边框card | JSON
  • 嵌套在frame中带底部栏的card | JSON
  • 嵌套在frame中带底部栏的card | JSON
  • 嵌套在frame中带头部和底部栏的card | JSON
  • 带头部操作按钮的CardFrame | JSON

checkbox

checkbox

  • Basic checkbox | JSON
  • Disabled checkbox | JSON
  • Checkbox with description | JSON
  • Card-style checkbox | JSON
  • Checkbox form | JSON
  • 基础checkbox | JSON
  • 禁用状态checkbox | JSON
  • 带描述的checkbox | JSON
  • 卡片样式checkbox | JSON
  • Checkbox表单 | JSON

checkbox-group

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
  • 带禁用项的checkbox group | JSON
  • 带父级checkbox的checkbox group | JSON
  • 带父级的嵌套checkbox group | JSON
  • Checkbox group表单 | JSON

collapsible

collapsible

  • Basic collapsible | JSON
  • 基础collapsible | JSON

combobox

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 | JSON
  • 禁用状态combobox | JSON
  • 小尺寸combobox | JSON
  • 大尺寸combobox | JSON
  • 带标签combobox | JSON
  • 自动高亮第一个选项的combobox | JSON
  • 带清除按钮的combobox | JSON
  • 选项分组combobox | JSON
  • 支持多选的combobox | JSON
  • 弹窗内嵌输入框的combobox | JSON
  • Combobox表单 | JSON
  • 多选combobox表单 | JSON
  • 带前置附加内容的combobox | JSON
  • 带前置附加内容的多选combobox | JSON
  • 胶囊形combobox | JSON
  • 时区选择combobox | JSON
  • 带搜索输入框的时区选择combobox | JSON
  • 带select触发器的combobox | JSON

command

command

  • Command palette with dialog | JSON
  • Command palette with AI assistant | JSON
  • 带dialog的命令面板 | JSON
  • 带AI助手的命令面板 | JSON

date-picker

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
  • 日期范围选择器 | JSON
  • 双月展示范围选择date picker | JSON
  • 带输入框和下拉导航的date picker | JSON
  • 带预设选项的date picker | JSON
  • 带输入框的date picker | JSON
  • 选择后自动关闭的date picker | JSON
  • 多选日期选择器 | JSON
  • 类select触发器的date picker | JSON

dialog

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
  • 带表单的dialog | JSON
  • 极简底部栏dialog | JSON
  • 从菜单打开的dialog | JSON
  • 嵌套dialog | JSON
  • 带关闭确认的dialog | JSON
  • 长内容dialog | JSON

drawer

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
  • 带关闭按钮的简单底部drawer | JSON
  • 无拖动条的底部drawer | JSON
  • 带关闭按钮的drawer | JSON
  • 四位置内嵌样式drawer | JSON
  • 四位置直角样式drawer | JSON
  • 带用户协议长可滚动内容的drawer | JSON
  • 内容居中的嵌套底部drawer | JSON
  • 内嵌样式的嵌套右侧drawer | JSON
  • 带停靠高度的底部drawer | JSON
  • 支持默认和极简底部栏的编辑资料表单drawer | JSON
  • 左侧弹出的移动端菜单drawer | JSON
  • 响应式编辑资料:桌面端dialog、移动端drawer | JSON
  • 响应式操作菜单:桌面端menu、移动端drawer | JSON
  • 带滑动触发区域的左侧drawer | JSON

empty

empty

  • Empty state with icon and actions | JSON
  • 带图标和操作按钮的空状态 | JSON

field

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
  • 带描述的field | JSON
  • 带必填标识的field | JSON
  • 禁用状态field | JSON
  • 展示校验错误的field | JSON
  • 展示field有效性状态 | JSON
  • 带field的输入组 | JSON
  • 带autocomplete的field | JSON
  • 带combobox的field | JSON
  • 带多选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构建的完整表单 | JSON

fieldset

fieldset

  • Fieldset with multiple fields | JSON
  • 包含多个field的fieldset | JSON

form

form

  • Input in a form | JSON
  • Form with zod validation | JSON
  • 表单中的输入框 | JSON
  • 带zod校验的表单 | JSON

frame

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
  • 带多个分隔面板的frame | JSON
  • 带多个堆叠面板的frame | JSON
  • 带可折叠内容和删除按钮的frame | JSON

group

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
  • 带输入框的group | JSON
  • 小尺寸group | JSON
  • 大尺寸group | JSON
  • 带禁用按钮的group | JSON
  • 带默认按钮的group | JSON
  • 带前置文本的group | JSON
  • 带后置文本的group | JSON
  • 垂直group | JSON
  • 嵌套group | JSON
  • 带弹窗的group | JSON
  • 带输入组的group | JSON
  • 带menu的group | JSON
  • 带select的group | JSON
  • 带搜索功能的group | JSON
  • 带添加按钮和输入框的group | JSON
  • 带输入框和货币文本的group | JSON
  • 带select和输入框的group | JSON
  • 带输入框和select的group | JSON
  • 带输入框和文本按钮的group | JSON
  • 带两个数值输入框的范围选择group | JSON
  • 带筛选标签、多选combobox和移除按钮的group | JSON

input

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
  • 文件input | JSON
  • 带标签input | JSON
  • 基于Group实现的带按钮input | JSON
  • 带前置文本和后置tooltip的input | JSON
  • 支持显隐切换的密码input | JSON
  • 模仿地址栏的input组 | JSON
  • 带快捷键提示的input组 | JSON
  • 前置带加载spinner的input组 | JSON
  • 带标签和必填标识的input | JSON
  • 带可选标识标签的input | JSON
  • 自定义边框和背景的input | JSON
  • 后置带加载spinner的input组 | JSON
  • 只读input | JSON
  • 带剩余字符计数的input | JSON
  • 胶囊形input | JSON

input-group

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
  • 带后置图标的input group | JSON
  • 带前置文本的input group | JSON
  • 带后置文本的input group | JSON
  • 同时带前置和后置文本的input group | JSON
  • 带number field的input group | JSON
  • 带后置tooltip的input group | JSON
  • 带图标按钮的input group | JSON
  • 带按钮的input group | JSON
  • 带badge的input group | JSON
  • 带快捷键提示的input group | JSON
  • 带内置标签的input group | JSON
  • 小尺寸input group | JSON
  • 大尺寸input group | JSON
  • 禁用状态input group | JSON
  • 带加载spinner的input group | JSON
  • 带textarea的input group | JSON
  • 带badge和menu的input group | JSON
  • 基于input group和toggle构建的迷你编辑器 | JSON
  • 带搜索图标的input group | JSON
  • 带前置tooltip的input group | JSON
  • 带清除按钮的input group | JSON
  • 带加载器和语音按钮的搜索input组 | JSON
  • 带字符计数的input group | JSON
  • 带强度指示器的密码input | JSON
  • 带语言选择器的代码片段input | JSON
  • 带附件按钮的消息输入框 | JSON
  • 带语音和发送按钮的聊天输入框 | JSON

input-otp

input-otp

  • Basic OTP input | JSON
  • Large OTP input | JSON
  • OTP input with separator | JSON
  • OTP input with label | JSON
  • Digits-only OTP input | JSON
  • Invalid OTP input | JSON
  • OTP input with auto validation | JSON
  • 基础OTP input | JSON
  • 大尺寸OTP input | JSON
  • 带分隔符的OTP input | JSON
  • 带标签的OTP input | JSON
  • 仅允许数字输入的OTP input | JSON
  • 无效状态OTP input | JSON
  • 自动校验的OTP input | JSON

kbd

kbd

  • Keyboard shortcuts display | JSON
  • 快捷键展示 | JSON

menu

menu

  • Basic menu | JSON
  • Menu with hover | JSON
  • Menu with checkbox | JSON
  • Menu with checkbox items as switches | JSON
  • Menu with radio group | JSON
  • Menu with link | JSON
  • Menu with group labels | JSON
  • Nested menu | JSON
  • Menu close on click | JSON
  • 基础menu | JSON
  • 带hover效果的menu | JSON
  • 带checkbox的menu | JSON
  • checkbox项为switch样式的menu | JSON
  • 带radio group的menu | JSON
  • 带链接的menu | JSON
  • 带分组标签的menu | JSON
  • 嵌套menu | JSON
  • 点击后自动关闭的menu | JSON

meter

meter

  • Basic meter | JSON
  • Simple meter | JSON
  • Meter with formatted value | JSON
  • Meter with range | JSON
  • 基础meter | JSON
  • 简约meter | JSON
  • 带格式化数值的meter | JSON
  • 带范围的meter | JSON

number-field

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
  • 带标签的number field | JSON
  • 支持拖动调整的number field | JSON
  • 带范围限制的number field | JSON
  • 带格式化数值的number field | JSON
  • 带步长的number field | JSON
  • 表单中的number field | JSON
  • 胶囊形number field | JSON

pagination

pagination

  • Pagination example | JSON
  • Pagination with previous and next buttons only | JSON
  • Pagination with select, and previous and next buttons | JSON
  • Pagination示例 | JSON
  • 仅带上一页/下一页按钮的pagination | JSON
  • 带选择器和上一页/下一页按钮的pagination | JSON

popover

popover

  • Popover with a form | JSON
  • Popover with close button | JSON
  • Animated popovers | JSON
  • 带表单的popover | JSON
  • 带关闭按钮的popover | JSON
  • 带动画的popover | JSON

preview-card

preview-card

  • Preview card with popup | JSON
  • 带弹窗的preview card | JSON

progress

progress

  • Basic progress bar | JSON
  • Progress with label and value | JSON
  • Progress with formatted value | JSON
  • 基础进度条 | JSON
  • 带标签和数值的progress | JSON
  • 带格式化数值的progress | JSON

radio-group

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
  • 基础radio group | JSON
  • 禁用状态radio group | JSON
  • 带描述的radio group | JSON
  • 卡片样式radio group | JSON
  • 表单中的radio group | JSON
  • 带图片卡片的主题选择器 | JSON

scroll-area

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
  • 边缘渐变消失的scroll area | JSON
  • 带滚动条预留空间的横向scroll area | JSON

select

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
  • 无选项对齐的select | JSON
  • 选项分组select | JSON
  • 多选select | JSON
  • 带图标的select | JSON
  • 选项带图标的select | JSON
  • 支持对象值的select | JSON
  • 带禁用项的select | JSON
  • 时区选择select | JSON
  • 带彩色状态点的状态选择select | JSON
  • 胶囊形select触发器 | JSON
  • 带左侧文本标签的select | JSON
  • 带国家国旗的select | JSON
  • 仅选项带描述的select | JSON
  • 带avatar的select | JSON
  • 带avatar和用户名的富样式select | JSON
  • 自适应宽度select | JSON
  • 自定义边框和背景的select | JSON
  • 带标签的select | JSON
  • 表单中的select | JSON

separator

separator

  • Separator with horizontal and vertical orientations | JSON
  • 支持横向和纵向的separator | JSON

sheet

sheet

  • Basic sheet | JSON
  • Sheet inset | JSON
  • Sheet position | JSON
  • 基础sheet | JSON
  • 内嵌样式sheet | JSON
  • 自定义位置sheet | JSON

skeleton

skeleton

  • Basic skeleton | JSON
  • Skeleton only | JSON
  • 基础skeleton | JSON
  • 纯骨架屏 | JSON

slider

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
  • 带标签和数值的slider | JSON
  • 禁用状态slider | JSON
  • 带参考标签的slider | JSON
  • 带刻度的slider | JSON
  • 标签在上方的slider | JSON
  • 范围选择slider | JSON
  • 3个滑块的slider | JSON
  • 滑块无碰撞限制的范围slider | JSON
  • 滑块碰撞可交换位置的范围slider | JSON
  • 带图标的slider | JSON
  • 带输入框的slider | JSON
  • 带输入框的范围slider | JSON
  • 带增减按钮的slider | JSON
  • 价格范围slider | JSON
  • 表情评分slider | JSON
  • 纵向slider | JSON
  • 纵向范围slider | JSON
  • 带输入框的纵向slider | JSON
  • 基于纵向slider实现的均衡器 | JSON
  • 带重置功能的对象位置slider | JSON
  • 带直方图的价格slider | JSON
  • 表单中的slider | JSON

spinner

spinner

  • Basic spinner | JSON
  • 基础spinner | JSON

switch

switch

  • Basic switch | JSON
  • Disabled switch | JSON
  • Switch with description | JSON
  • Switch card | JSON
  • Switch in form | JSON
  • Custom size switch | JSON
  • 基础switch | JSON
  • 禁用状态switch | JSON
  • 带描述的switch | JSON
  • 卡片样式switch | JSON
  • 表单中的switch | JSON
  • 自定义尺寸switch | JSON

table

table

  • Basic table | JSON
  • Framed table | JSON
  • Table with TanStack Table and checkboxes | JSON
  • Table with TanStack Table, sorting, and pagination | JSON
  • 基础table | JSON
  • 带边框table | JSON
  • 基于TanStack Table实现的带checkbox的table | JSON
  • 基于TanStack Table实现的带排序和分页的table | JSON

tabs

tabs

  • Basic 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
  • 基础tabs | JSON
  • 下划线样式tabs | JSON
  • 纵向tabs | JSON
  • 下划线样式纵向tabs | JSON
  • 触发器全圆角的tabs | JSON
  • 名称前带图标的tabs | JSON
  • 名称前带图标的下划线样式tabs | JSON
  • 仅展示图标的tabs | JSON
  • 下划线样式、图标在顶部的tabs | JSON
  • 带计数badge的tabs | JSON
  • 下划线样式、名称前带图标的纵向tabs | JSON
  • 仅展示图标带计数badge的tabs | JSON
  • 仅展示图标带分组tooltip的tabs | JSON

textarea

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
  • 带标签的textarea | JSON
  • 表单中的textarea | JSON
  • 带标签和必填标识的textarea | JSON
  • 带可选标识标签的textarea | JSON
  • 自定义边框和背景的textarea | JSON
  • 只读textarea | JSON
  • 带剩余字符计数的textarea | JSON
  • 带必填标识的textarea field | JSON
  • 固定高度的短textarea | JSON
  • 按钮右对齐的textarea | JSON
  • 按钮左对齐的textarea | JSON

toast

toast

  • Basic toast | JSON
  • Toast with status | JSON
  • Loading toast | JSON
  • Toast with action | JSON
  • Promise toast | JSON
  • Toast with varying heights | JSON
  • Anchored toast with tooltip style | JSON
  • Anchored toast | JSON
  • Promise toast with cancel action | JSON
  • 基础toast | JSON
  • 带状态的toast | JSON
  • 加载中toast | JSON
  • 带操作按钮的toast | JSON
  • Promise状态toast | JSON
  • 可变高度toast | JSON
  • tooltip样式的锚定toast | JSON
  • 锚定toast | JSON
  • 带取消操作的Promise toast | JSON

toggle

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
  • 带图标toggle | JSON
  • 小尺寸toggle | JSON
  • 大尺寸toggle | JSON
  • 禁用状态toggle | JSON
  • 图标toggle组 | JSON
  • 带tooltip和成功toast的收藏toggle | JSON

toggle-group

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
  • 描边样式纵向toggle group | JSON
  • 禁用状态toggle group | JSON
  • 带禁用项的toggle group | JSON
  • 支持多选的toggle group | JSON
  • 带tooltip的toggle group | JSON

toolbar

toolbar

  • Toolbar with toggles, buttons, and select | JSON
  • 带toggle、button和select的toolbar | JSON

tooltip

tooltip

  • Basic tooltip | JSON
  • Grouped tooltips | JSON
  • Toggle group animated tooltip | JSON
  • Vertical group with animated tooltip | JSON
  • 基础tooltip | JSON
  • 分组tooltip | JSON
  • Toggle group带动画的tooltip | JSON
  • 纵向group带动画的tooltip | JSON