| 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
- 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: 508 particles across 54 component types
Component types
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
- Address autocomplete with Google Maps Places API | 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
