---
name: COSS Particles
slug: coss-particles
category: Frontend
description: COSS Particles indexes all COSS UI particle examples so developers can find copy-paste-ready component patterns built on COSS primitives. Each particle includes a description and a JSON URL for easy installation when implementing UI features.
github: "https://github.com/crafter-station/petdex/tree/main/.agents/skills/coss-particles"
language: TypeScript
stars: 3840
forks: 181
install: "npx degit https://github.com/crafter-station/petdex/tree/main/.agents/skills/coss-particles ~/.claude/skills/coss-particles"
installs_to: ~/.claude/skills/coss-particles
source_path: .agents/skills/coss-particles/SKILL.md
collection_size: 3
category_size: 567
collection_url: "https://dirskills.com/collections/crafter-station/petdex"
added: 2026-08-16T07:01:59.148Z
last_synced: 2026-08-16T07:01:59.148Z
canonical_url: "https://dirskills.com/skills/coss-particles"
---

# COSS Particles

COSS Particles indexes all COSS UI particle examples so developers can find copy-paste-ready component patterns built on COSS primitives. Each particle includes a description and a JSON URL for easy installation when implementing UI features.

**Install:**

```bash
npx degit https://github.com/crafter-station/petdex/tree/main/.agents/skills/coss-particles ~/.claude/skills/coss-particles
```

## README

# 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: **484 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) (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)

### 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)
- Extra-small button | [JSON](https://coss.com/ui/r/p-button-8.json)
- Small button | [JSON](https://coss.com/ui/r/p-button-9.json)
- Large button | [JSON](https://coss.com/ui/r/p-button-10.json)
- Extra-large button | [JSON](https://coss.com/ui/r/p-button-11.json)
- Disabled button | [JSON](https://coss.com/ui/r/p-button-12.json)
- Icon button | [JSON](https://coss.com/ui/r/p-button-13.json)
- Small icon button | [JSON](https://coss.com/ui/r/p-button-14.json)
- Large icon button | [JSON](https://coss.com/ui/r/p-button-15.json)
- Button with icon | [JSON](https://coss.com/ui/r/p-button-16.json)
- Link rendered as button | [JSON](https://coss.com/ui/r/p-button-17.json)
- Button using the built-in loading prop | [JSON](https://coss.com/ui/r/p-button-41.json)
- Custom loading button with manual Spinner | [JSON](https://coss.com/ui/r/p-button-18.json)
- Expandable show more/less toggle button | [JSON](https://coss.com/ui/r/p-button-19.json)
- Back link button with chevron | [JSON](https://coss.com/ui/r/p-button-20.json)
- Card-style button with heading and description | [JSON](https://coss.com/ui/r/p-button-21.json)
- Directional pad control buttons | [JSON](https://coss.com/ui/r/p-button-22.json)
- Outline like button with count | [JSON](https://coss.com/ui/r/p-button-23.json)
- Social login icon buttons | [JSON](https://coss.com/ui/r/p-button-24.json)
- Star button with count badge | [JSON](https://coss.com/ui/r/p-button-26.json)
- Button group with QR code icon and sign in | [JSON](https://coss.com/ui/r/p-button-27.json)
- Button with avatar | [JSON](https://coss.com/ui/r/p-button-28.json)
- Pill-shaped button with rounded-full styling | [JSON](https://coss.com/ui/r/p-button-29.json)
- Button with animated arrow on hover | [JSON](https://coss.com/ui/r/p-button-30.json)
- Button with keyboard shortcut indicator | [JSON](https://coss.com/ui/r/p-button-31.json)
- Button with notification badge | [JSON](https://coss.com/ui/r/p-button-32.json)
- Paired buttons (Cancel/Save) | [JSON](https://coss.com/ui/r/p-button-33.json)
- Button with animated status dot | [JSON](https://coss.com/ui/r/p-button-34.json)
- Icon-only copy button with feedback | [JSON](https://coss.com/ui/r/p-button-35.json)
- Copy button with feedback | [JSON](https://coss.com/ui/r/p-button-36.json)
- Rotating icon button (FAB-style toggle) | [JSON](https://coss.com/ui/r/p-button-37.json)
- Hamburger menu button with animated icon | [JSON](https://coss.com/ui/r/p-button-39.json)
- Download button with progress and cancel action | [JSON](https://coss.com/ui/r/p-button-40.json)
- Social login buttons (Google, X, GitHub) | [JSON](https://coss.com/ui/r/p-button-38.json)

### calendar

- Basic calendar | [JSON](https://coss.com/ui/r/p-calendar-1.json)
- Calendar with date range selection | [JSON](https://coss.com/ui/r/p-calendar-3.json)
- Calendar with month/year dropdown navigation | [JSON](https://coss.com/ui/r/p-calendar-4.json)
- Calendar with custom Select dropdown for month/year | [JSON](https://coss.com/ui/r/p-calendar-5.json)
- Calendar with Combobox dropdown for month/year | [JSON](https://coss.com/ui/r/p-calendar-6.json)
- Calendar with disabled dates | [JSON](https://coss.com/ui/r/p-calendar-7.json)
- Calendar with multiple date selection | [JSON](https://coss.com/ui/r/p-calendar-8.json)
- Calendar with custom cell size | [JSON](https://coss.com/ui/r/p-calendar-2.json)
- Calendar with rounded day buttons | [JSON](https://coss.com/ui/r/p-calendar-9.json)
- Calendar with rounded range selection style | [JSON](https://coss.com/ui/r/p-calendar-10.json)
- Calendar with right-aligned navigation | [JSON](https://coss.com/ui/r/p-calendar-11.json)
- Calendar with week numbers | [JSON](https://coss.com/ui/r/p-calendar-12.json)
- Calendar with year-only combobox dropdown | [JSON](https://coss.com/ui/r/p-calendar-13.json)
- Calendar without arrow navigation (dropdown only) | [JSON](https://coss.com/ui/r/p-calendar-14.json)
- Calendar with current month button | [JSON](https://coss.com/ui/r/p-calendar-15.json)
- Calendar with today button | [JSON](https://coss.com/ui/r/p-calendar-16.json)
- Calendar with date input | [JSON](https://coss.com/ui/r/p-calendar-17.json)
- Calendar with time input | [JSON](https://coss.com/ui/r/p-calendar-18.json)
- Calendar with time slots (appointment picker) | [JSON](https://coss.com/ui/r/p-calendar-19.json)
- Calendar with date presets | [JSON](https://coss.com/ui/r/p-calendar-20.json)
- Range calendar with date presets | [JSON](https://coss.com/ui/r/p-calendar-21.json)
- Two months calendar | [JSON](https://coss.com/ui/r/p-calendar-22.json)
- Three months calendar | [JSON](https://coss.com/ui/r/p-calendar-23.json)
- Pricing calendar with custom day buttons | [JSON](https://coss.com/ui/r/p-calendar-24.json)

### card

- A basic card with header and footer | [JSON](https://coss.com/ui/r/p-card-1.json)
- Authentication card with actions | [JSON](https://coss.com/ui/r/p-card-2.json)
- Authentication card with separators | [JSON](https://coss.com/ui/r/p-card-3.json)
- Framed card with footer | [JSON](https://coss.com/ui/r/p-card-4.json)
- Framed card with header | [JSON](https://coss.com/ui/r/p-card-5.json)
- Framed card with header and footer | [JSON](https://coss.com/ui/r/p-card-6.json)
- Framed card with no rounded bottom | [JSON](https://coss.com/ui/r/p-card-7.json)
- Card within a frame and footer | [JSON](https://coss.com/ui/r/p-card-8.json)
- Card within a frame and footer | [JSON](https://coss.com/ui/r/p-card-9.json)
- Card within a frame with header and footer | [JSON](https://coss.com/ui/r/p-card-10.json)
- CardFrame with header action | [JSON](https://coss.com/ui/r/p-card-11.json)

### checkbox

- Basic checkbox | [JSON](https://coss.com/ui/r/p-checkbox-1.json)
- Disabled checkbox | [JSON](https://coss.com/ui/r/p-checkbox-2.json)
- Checkbox with description | [JSON](https://coss.com/ui/r/p-checkbox-3.json)
- Card-style checkbox | [JSON](https://coss.com/ui/r/p-checkbox-4.json)
- Checkbox form | [JSON](https://coss.com/ui/r/p-checkbox-5.json)

### checkbox-group

- Basic checkbox group | [JSON](https://coss.com/ui/r/p-checkbox-group-1.json)
- Checkbox group with disabled items | [JSON](https://coss.com/ui/r/p-checkbox-group-2.json)
- Checkbox group with parent checkbox | [JSON](https://coss.com/ui/r/p-checkbox-group-3.json)
- Nested checkbox group with parent | [JSON](https://coss.com/ui/r/p-checkbox-group-4.json)
- Checkbox group form | [JSON](https://coss.com/ui/r/p-checkbox-group-5.json)

### collapsible

- Basic collapsible | [JSON](https://coss.com/ui/r/p-collapsible-1.json)

### combobox

- Basic combobox | [JSON](https://coss.com/ui/r/p-combobox-1.json)
- Disabled combobox | [JSON](https://coss.com/ui/r/p-combobox-2.json)
- Small combobox | [JSON](https://coss.com/ui/r/p-combobox-3.json)
- Large combobox | [JSON](https://coss.com/ui/r/p-combobox-4.json)
- Combobox with label | [JSON](https://coss.com/ui/r/p-combobox-5.json)
- Combobox auto highlighting the first option | [JSON](https://coss.com/ui/r/p-combobox-6.json)
- Combobox with clear button | [JSON](https://coss.com/ui/r/p-combobox-7.json)
- Combobox with grouped items | [JSON](https://coss.com/ui/r/p-combobox-8.json)
- Combobox with multiple selection | [JSON](https://coss.com/ui/r/p-combobox-9.json)
- Combobox with input inside popup | [JSON](https://coss.com/ui/r/p-combobox-10.json)
- Combobox form | [JSON](https://coss.com/ui/r/p-combobox-11.json)
- Combobox multiple form | [JSON](https://coss.com/ui/r/p-combobox-12.json)
- Combobox with start addon | [JSON](https://coss.com/ui/r/p-combobox-13.json)
- Combobox multiple with start addon | [JSON](https://coss.com/ui/r/p-combobox-14.json)
- Pill-shaped combobox | [JSON](https://coss.com/ui/r/p-combobox-15.json)
- Timezone combobox | [JSON](https://coss.com/ui/r/p-combobox-16.json)
- Timezone combobox with search input | [JSON](https://coss.com/ui/r/p-combobox-17.json)
- Combobox with select trigger | [JSON](https://coss.com/ui/r/p-combobox-18.json)

### command

- Command palette with dialog | [JSON](https://coss.com/ui/r/p-command-1.json)
- Command palette with AI assistant | [JSON](https://coss.com/ui/r/p-command-2.json)

### date-picker

- Basic date picker | [JSON](https://coss.com/ui/r/p-date-picker-1.json)
- Date range picker | [JSON](https://coss.com/ui/r/p-date-picker-2.json)
- Two months calendar with range date | [JSON](https://coss.com/ui/r/p-date-picker-9.json)
- Date picker with field and dropdown navigation | [JSON](https://coss.com/ui/r/p-date-picker-3.json)
- Date picker with presets | [JSON](https://coss.com/ui/r/p-date-picker-4.json)
- Date picker with input | [JSON](https://coss.com/ui/r/p-date-picker-5.json)
- Date picker that closes on select | [JSON](https://coss.com/ui/r/p-date-picker-6.json)
- Multiple dates picker | [JSON](https://coss.com/ui/r/p-date-picker-7.json)
- Date picker with select-like trigger | [JSON](https://coss.com/ui/r/p-date-picker-8.json)

### dialog

- Dialog with form | [JSON](https://coss.com/ui/r/p-dialog-1.json)
- Dialog with bare footer | [JSON](https://coss.com/ui/r/p-dialog-6.json)
- Dialog opened from menu | [JSON](https://coss.com/ui/r/p-dialog-2.json)
- Nested dialogs | [JSON](https://coss.com/ui/r/p-dialog-3.json)
- Dialog with close confirmation | [JSON](https://coss.com/ui/r/p-dialog-4.json)
- Dialog with long content | [JSON](https://coss.com/ui/r/p-dialog-5.json)

### drawer

- Simple bottom drawer with close button | [JSON](https://coss.com/ui/r/p-drawer-1.json)
- Bottom drawer without drag bar | [JSON](https://coss.com/ui/r/p-drawer-2.json)
- Drawer with close button | [JSON](https://coss.com/ui/r/p-drawer-3.json)
- Inset variant drawers for all four positions | [JSON](https://coss.com/ui/r/p-drawer-4.json)
- Straight variant drawers for all four positions | [JSON](https://coss.com/ui/r/p-drawer-5.json)
- Scrollable content with terms and conditions | [JSON](https://coss.com/ui/r/p-drawer-6.json)
- Nested bottom drawers with centered content | [JSON](https://coss.com/ui/r/p-drawer-7.json)
- Nested right drawers with inset variant | [JSON](https://coss.com/ui/r/p-drawer-8.json)
- Bottom drawer with snap points | [JSON](https://coss.com/ui/r/p-drawer-9.json)
- Edit profile form with default and bare footer variants | [JSON](https://coss.com/ui/r/p-drawer-10.json)
- Mobile menu drawer from the left | [JSON](https://coss.com/ui/r/p-drawer-11.json)
- Responsive edit profile: dialog on desktop, drawer on mobile | [JSON](https://coss.com/ui/r/p-drawer-12.json)
- Responsive actions menu: menu on desktop, drawer on mobile | [JSON](https://coss.com/ui/r/p-drawer-13.json)
- Left drawer with swipe area | [JSON](https://coss.com/ui/r/p-drawer-14.json)

### empty

- Empty state with icon and actions | [JSON](https://coss.com/ui/r/p-empty-1.json)

### field

- Field with description | [JSON](https://coss.com/ui/r/p-field-1.json)
- Field with required indicator | [JSON](https://coss.com/ui/r/p-field-2.json)
- Field in disabled state | [JSON](https://coss.com/ui/r/p-field-3.json)
- Field showing validation error | [JSON](https://coss.com/ui/r/p-field-4.json)
- Show field validity state | [JSON](https://coss.com/ui/r/p-field-5.json)
- Input group with field | [JSON](https://coss.com/ui/r/p-field-6.json)
- Field with autocomplete | [JSON](https://coss.com/ui/r/p-field-7.json)
- Field with combobox | [JSON](https://coss.com/ui/r/p-field-8.json)
- Field with multiple selection combobox | [JSON](https://coss.com/ui/r/p-field-9.json)
- Field with textarea | [JSON](https://coss.com/ui/r/p-field-10.json)
- Field with select | [JSON](https://coss.com/ui/r/p-field-11.json)
- Field with checkbox | [JSON](https://c