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: 508 particles across 54 component types

Component types

• accordion (4)
• alert (7)
• alert-dialog (2)
• autocomplete (16)
• avatar (14)
• badge (20)
• breadcrumb (7)
• button (40)
• calendar (25)
• card (11)
• checkbox (5)
• checkbox-group (5)
• collapsible (1)
• combobox (20)
• command (2)
• context-menu (8)
• 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)
• navigation (3)
• number-field (11)
• otp-field (9)
• pagination (3)
• popover (4)
• preview-card (1)
• progress (3)
• radio-group (9)
• scroll-area (5)
• select (23)
• separator (1)
• sheet (3)
• skeleton (2)
• slider (23)
• spinner (1)
• switch (9)
• table (8)
• tabs (15)
• textarea (15)
• toast (13)
• 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
• 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