COSS UI Particles Index

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

How to use this 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.

JSON URL pattern

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

Source code

Particle source files live in this repo at apps/ui/registry/default/particles/.

Updating this index

Run the generator script from the coss repo root:

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

Total: 480 particles across 52 component types

Component types

accordion (4)
alert (7)
alert-dialog (2)
autocomplete (15)
avatar (14)
badge (20)
breadcrumb (7)
button (40)
calendar (24)
card (11)
checkbox (5)
checkbox-group (5)
collapsible (1)
combobox (18)
command (2)
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)
number-field (11)
otp-field (9)
pagination (3)
popover (3)
preview-card (1)
progress (3)
radio-group (6)
scroll-area (5)
select (23)
separator (1)
sheet (3)
skeleton (2)
slider (23)
spinner (1)
switch (6)
table (8)
tabs (13)
textarea (15)
toast (9)
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

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-dialog

Alert dialog | JSON
Alert dialog with bare footer | 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

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

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

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

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

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

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

checkbox

Basic checkbox | JSON
Disabled checkbox | JSON
Checkbox with description | JSON
Card-style 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

collapsible

Basic 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

command

Command palette with dialog | JSON
Command palette with AI assistant | 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

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

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

empty

Empty state with icon and actions | 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

fieldset

Fieldset with multiple fields | JSON

form

Input in a form | JSON
Form with zod validation | 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

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

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-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

kbd

Keyboard shortcuts display | JSON

meter

Basic meter | JSON
Simple meter | JSON
Meter with formatted value | JSON
Meter with range | 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

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

pagination

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

popover

Popover with a form | JSON
Popover with close button | JSON
Animated popovers | JSON

preview-card

Preview card with popup | JSON

progress

Basic progress bar | JSON
Progress with label and value | JSON
Progress with formatted value | 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

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

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

separator

Separator with horizontal and vertical orientations | JSON

sheet

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

skeleton

Basic skeleton | JSON
Skeleton only | 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

spinner

Basic spinner | JSON

switch

Basic switch | JSON
Disabled switch | JSON
Switch with description | JSON
Switch card | JSON
Switch in form | JSON
Custom size switch | 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

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

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

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

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-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

toolbar

Toolbar with toggles, buttons, and select | JSON

tooltip

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

coss-particles