/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](https://coss.com/ui) 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: **508 particles** across **54 component types**

Component types

• [accordion](#accordion) (4)
• [alert](#alert) (7)
• [alert-dialog](#alert-dialog) (2)
• [autocomplete](#autocomplete) (16)
• [avatar](#avatar) (14)
• [badge](#badge) (20)
• [breadcrumb](#breadcrumb) (7)
• [button](#button) (40)
• [calendar](#calendar) (25)
• [card](#card) (11)
• [checkbox](#checkbox) (5)
• [checkbox-group](#checkbox-group) (5)
• [collapsible](#collapsible) (1)
• [combobox](#combobox) (20)
• [command](#command) (2)
• [context-menu](#context-menu) (8)
• [date-picker](#date-picker) (9)
• [dialog](#dialog) (6)
• [drawer](#drawer) (14)
• [empty](#empty) (1)
• [field](#field) (18)
• [fieldset](#fieldset) (1)
• [form](#form) (2)
• [frame](#frame) (4)
• [group](#group) (22)
• [input](#input) (19)
• [input-group](#input-group) (28)
• [kbd](#kbd) (1)
• [menu](#menu) (9)
• [meter](#meter) (4)
• [navigation](#navigation) (3)
• [number-field](#number-field) (11)
• [otp-field](#otp-field) (9)
• [pagination](#pagination) (3)
• [popover](#popover) (4)
• [preview-card](#preview-card) (1)
• [progress](#progress) (3)
• [radio-group](#radio-group) (9)
• [scroll-area](#scroll-area) (5)
• [select](#select) (23)
• [separator](#separator) (1)
• [sheet](#sheet) (3)
• [skeleton](#skeleton) (2)
• [slider](#slider) (23)
• [spinner](#spinner) (1)
• [switch](#switch) (9)
• [table](#table) (8)
• [tabs](#tabs) (15)
• [textarea](#textarea) (15)
• [toast](#toast) (13)
• [toggle](#toggle) (8)
• [toggle-group](#toggle-group) (9)
• [toolbar](#toolbar) (1)
• [tooltip](#tooltip) (4)

---

accordion

• Basic accordion | [JSON](https://coss.com/ui/r/p-accordion-1.json)
• Accordion with one panel open | [JSON](https://coss.com/ui/r/p-accordion-2.json)
• Accordion allowing multiple panels open | [JSON](https://coss.com/ui/r/p-accordion-3.json)
• Controlled accordion | [JSON](https://coss.com/ui/r/p-accordion-4.json)

alert

• Basic alert | [JSON](https://coss.com/ui/r/p-alert-1.json)
• Alert with icon | [JSON](https://coss.com/ui/r/p-alert-2.json)
• Alert with icon and action buttons | [JSON](https://coss.com/ui/r/p-alert-3.json)
• Info alert | [JSON](https://coss.com/ui/r/p-alert-4.json)
• Success alert | [JSON](https://coss.com/ui/r/p-alert-5.json)
• Warning alert | [JSON](https://coss.com/ui/r/p-alert-6.json)
• Error alert | [JSON](https://coss.com/ui/r/p-alert-7.json)

alert-dialog

• Alert dialog | [JSON](https://coss.com/ui/r/p-alert-dialog-1.json)
• Alert dialog with bare footer | [JSON](https://coss.com/ui/r/p-alert-dialog-2.json)

autocomplete

• Basic autocomplete | [JSON](https://coss.com/ui/r/p-autocomplete-1.json)
• Disabled autocomplete | [JSON](https://coss.com/ui/r/p-autocomplete-2.json)
• Small autocomplete | [JSON](https://coss.com/ui/r/p-autocomplete-3.json)
• Large autocomplete | [JSON](https://coss.com/ui/r/p-autocomplete-4.json)
• Autocomplete with label | [JSON](https://coss.com/ui/r/p-autocomplete-5.json)
• Autocomplete autofilling the input with the highlighted item | [JSON](https://coss.com/ui/r/p-autocomplete-6.json)
• Autocomplete auto highlighting the first option | [JSON](https://coss.com/ui/r/p-autocomplete-7.json)
• Autocomplete with clear button | [JSON](https://coss.com/ui/r/p-autocomplete-8.json)
• Autocomplete with trigger and clear buttons | [JSON](https://coss.com/ui/r/p-autocomplete-9.json)
• Autocomplete with grouped items | [JSON](https://coss.com/ui/r/p-autocomplete-10.json)
• Autocomplete with limited number of results | [JSON](https://coss.com/ui/r/p-autocomplete-11.json)
• Autocomplete with async items loading | [JSON](https://coss.com/ui/r/p-autocomplete-12.json)
• Autocomplete form | [JSON](https://coss.com/ui/r/p-autocomplete-13.json)
• Autocomplete form | [JSON](https://coss.com/ui/r/p-autocomplete-14.json)
• Pill-shaped autocomplete | [JSON](https://coss.com/ui/r/p-autocomplete-15.json)
• Address autocomplete with Google Maps Places API | [JSON](https://coss.com/ui/r/p-autocomplete-16.json)

avatar

• Avatar with image and fallback | [JSON](https://coss.com/ui/r/p-avatar-1.json)
• Fallback-only avatar | [JSON](https://coss.com/ui/r/p-avatar-2.json)
• Avatars with different sizes | [JSON](https://coss.com/ui/r/p-avatar-3.json)
• Avatars with different radii | [JSON](https://coss.com/ui/r/p-avatar-4.json)
• Overlapping avatar group | [JSON](https://coss.com/ui/r/p-avatar-5.json)
• Avatar with user icon fallback | [JSON](https://coss.com/ui/r/p-avatar-6.json)
• Avatar with emerald status dot | [JSON](https://coss.com/ui/r/p-avatar-7.json)
• Avatar with muted status dot | [JSON](https://coss.com/ui/r/p-avatar-8.json)
• Rounded avatar with top-right emerald status | [JSON](https://coss.com/ui/r/p-avatar-9.json)
• Avatar with