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

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.

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