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

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

• 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