coss-particles

name	coss-particles
description	Index of all COSS UI particle examples. Use when implementing UI features to find copy-paste-ready component patterns built on coss primitives. Each particle has a description and a JSON URL for easy installation.
compatibility	Requires coss UI components installed in the project.
license	MIT
metadata	{"author":"cosscom"}

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: 484 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 (13)
• (8)

---

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 |

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

kbd

• Keyboard shortcuts display | JSON

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

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

• 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

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