Login
cosscom/cossMIT1 file

Coss Particles

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.

Use this skillView repositoryView on skills.sh
Specification
Skill ID
cosscom/coss/coss-particles
Publisher
cosscom
Repository
coss
Installs
0
Files
1
License
MIT
Requires
Requires coss UI components installed in the project.
Synced
Sep 23, 2026
How to use it

Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.

cosscom/coss/coss-particlesInstalls these files
  • SKILL.md

What this skill tells the agent

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

More from cosscom

cosscom/coss

Coss

Helps implement coss UI components correctly. Use when building UIs with coss primitives and patterns (buttons, dialogs, selects, forms, menus, tabs, segmented controls, inputs, toasts, etc.), migrating from shadcn/Radix to coss/Base UI, composing trigger-based overlays, or troubleshooting coss component behavior. Covers imports, accessibility, Tailwind styling, and common pitfalls.

Use this skill in a project

Open any RiverX project, search the Skills panel for cosscom/coss/coss-particles, and install it in one click.

Use this skill