coss-particles

# 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: ```bash node apps/ui/scripts/generate-particle-index.cjs ``` Total: **480 particles** across **52 component types** ## Component types - [accordion](#accordion) (4) - [alert](#alert) (7) - [alert-dialog](#alert-dialog) (2) - [autocomplete](#autocomplete) (15) - [avatar](#avatar) (14) - [badge](#badge) (20) - [breadcrumb](#breadcrumb) (7) - [button](#button) (40) - [calendar](#calendar) (24) - [card](#card) (11) - [checkbox](#checkbox) (5) - [checkbox-group](#checkbox-group) (5) - [collapsible](#collapsible) (1) - [combobox](#combobox) (18) - [command](#command) (2) - [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) - [number-field](#number-field) (11) - [otp-field](#otp-field) (9) - [pagination](#pagination) (3) - [popover](#popover) (3) - [preview-card](#preview-card) (1) - [progress](#progress) (3) - [radio-group](#radio-group) (6) - [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) (6) - [table](#table) (8) - [tabs](#tabs) (13) - [textarea](#textarea) (15) - [toast](#toast) (9) - [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) ### 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 notification badge | [JSON](https://coss.com/ui/r/p-avatar-10.json) - Rounded avatar with notification badge | [JSON](https://coss.com/ui/r/p-avatar-11.json) - Avatar with verified badge | [JSON](https://coss.com/ui/r/p-avatar-12.json) - Small overlapping avatar group | [JSON](https://coss.com/ui/r/p-avatar-13.json) - Large overlapping avatar group | [JSON](https://coss.com/ui/r/p-avatar-14.json) ### badge - Basic badge | [JSON](https://coss.com/ui/r/p-badge-1.json) - Outline badge | [JSON](https://coss.com/ui/r/p-badge-2.json) - Secondary badge | [JSON](https://coss.com/ui/r/p-badge-3.json) - Destructive badge | [JSON](https://coss.com/ui/r/p-badge-4.json) - Info badge | [JSON](https://coss.com/ui/r/p-badge-5.json) - Success badge | [JSON](https://coss.com/ui/r/p-badge-6.json) - Warning badge | [JSON](https://coss.com/ui/r/p-badge-7.json) - Error badge | [JSON](https://coss.com/ui/r/p-badge-8.json) - Small badge | [JSON](https://coss.com/ui/r/p-badge-9.json) - Large badge | [JSON](https://coss.com/ui/r/p-badge-10.json) - Badge with icon | [JSON](https://coss.com/ui/r/p-badge-11.json) - Badge with link | [JSON](https://coss.com/ui/r/p-badge-12.json) - Badge with count | [JSON](https://coss.com/ui/r/p-badge-13.json) - Full rounded badge (pill) | [JSON](https://coss.com/ui/r/p-badge-14.json) - Badge with number after text | [JSON](https://coss.com/ui/r/p-badge-15.json) - Status badge - Paid | [JSON](https://coss.com/ui/r/p-badge-16.json) - Status badge - Pending | [JSON](https://coss.com/ui/r/p-badge-17.json) - Status badge - Failed | [JSON](https://coss.com/ui/r/p-badge-18.json) - Selectable badge with checkbox | [JSON](https://coss.com/ui/r/p-badge-19.json) - Removable badge | [JSON](https://coss.com/ui/r/p-badge-20.json) ### breadcrumb - Breadcrumb with menu example | [JSON](https://coss.com/ui/r/p-breadcrumb-1.json) - Breadcrumb with custom separator | [JSON](https://coss.com/ui/r/p-breadcrumb-2.json) - Breadcrumb with home icon for home link only | [JSON](https://coss.com/ui/r/p-breadcrumb-3.json) - Breadcrumb with folders icon menu | [JSON](https://coss.com/ui/r/p-breadcrumb-4.json) - Breadcrumb with icons before text | [JSON](https://coss.com/ui/r/p-breadcrumb-5.json) - Breadcrumb with dot separators | [JSON](https://coss.com/ui/r/p-breadcrumb-6.json) - Breadcrumb with select dropdown | [JSON](https://coss.com/ui/r/p-breadcrumb-7.json) ### button - Default button | [JSON](https://coss.com/ui/r/p-button-1.json) - Outline button | [JSON](https://coss.com/ui/r/p-button-2.json) - Secondary button | [JSON](https://coss.com/ui/r/p-button-3.json) - Destructive button | [JSON](https://coss.com/ui/r/p-button-4.json) - Destructive outline button | [JSON](https://coss.com/ui/r/p-button-5.json) - Ghost button | [JSON](https://coss.com/ui/r/p-button-6.json) - Link button | [JSON](https://coss.com/ui/r/p-button-7.json)