SKILL.md

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: 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

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

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

Ghost button | JSON

Link button | JSON

Extra-small button | JSON

Small button | JSON

Large button | JSON

Extra-large button | JSON

Disabled button | JSON

Icon button | JSON

Small icon button | JSON

Large icon button | JSON

Button with icon | JSON

Link rendered as button | JSON

Button using the built-in loading prop | JSON

Custom loading button with manual Spinner | JSON

Expandable show more/less toggle button | JSON

Back link button with chevron | JSON

Card-style button with heading and description | JSON

Directional pad control buttons | JSON

Outline like button with count | JSON

Social login icon buttons | JSON

Star button with count badge | JSON

Button group with QR code icon and sign in | JSON

Button with avatar | JSON

Pill-shaped button with rounded-full styling | JSON

Button with animated arrow on hover | JSON

Button with keyboard shortcut indicator | JSON

Button with notification badge | JSON

Paired buttons (Cancel/Save) | JSON

Button with animated status dot | JSON

Icon-only copy button with feedback | JSON

Copy button with feedback | JSON

Rotating icon button (FAB-style toggle) | JSON

Hamburger menu button with animated icon | JSON

Download button with progress and cancel action | JSON

Social login buttons (Google, X, GitHub) | JSON

calendar

Basic calendar | JSON

Calendar with date range selection | JSON

Calendar with month/year dropdown navigation | JSON

Calendar with custom Select dropdown for month/year | JSON

Calendar with Combobox dropdown for month/year | JSON

Calendar with disabled dates | JSON

Calendar with multiple date selection | JSON

Calendar with custom cell size | JSON

Calendar with rounded day buttons | JSON

Calendar with rounded range selection style | JSON

Calendar with right-aligned navigation | JSON

Calendar with week numbers | JSON

Calendar with year-only combobox dropdown | JSON

Calendar without arrow navigation (dropdown only) | JSON

Calendar with current month button | JSON

Calendar with today button | JSON

Calendar with date input | JSON

Calendar with time input | JSON

Calendar with time slots (appointment picker) | JSON

Calendar with date presets | JSON

Range calendar with date presets | JSON

Two months calendar | JSON

Three months calendar | JSON

Pricing calendar with custom day buttons | JSON

card

A basic card with header and footer | JSON

Authentication card with actions | JSON

Authentication card with separators | JSON

Framed card with footer | JSON

Framed card with header | JSON

Framed card with header and footer | JSON

Framed card with no rounded bottom | JSON

Card within a frame and footer | JSON

Card within a frame and footer | JSON

Card within a frame with header and footer | JSON

CardFrame with header action | JSON

checkbox

Basic checkbox | JSON

Disabled checkbox | JSON

Checkbox with description | JSON

Card-style checkbox | JSON

Checkbox form | JSON

checkbox-group

Basic checkbox group | JSON

Checkbox group with disabled items | JSON

Checkbox group with parent checkbox | JSON

Nested checkbox group with parent | JSON

Checkbox group form | JSON

collapsible

Basic collapsible | JSON

combobox

Basic combobox | JSON

Disabled combobox | JSON

Small combobox | JSON

Large combobox | JSON

Combobox with label | JSON

Combobox auto highlighting the first option | JSON

Combobox with clear button | JSON

Combobox with grouped items | JSON

Combobox with multiple selection | JSON

Combobox with input inside popup | JSON

Combobox form | JSON

Combobox multiple form | JSON

Combobox with start addon | JSON

Combobox multiple with start addon | JSON

Pill-shaped combobox | JSON

Timezone combobox | JSON

Timezone combobox with search input | JSON

Combobox with select trigger | JSON

command

Command palette with dialog | JSON

Command palette with AI assistant | JSON

date-picker

Basic date picker | JSON

Date range picker | JSON

Two months calendar with range date | JSON

Date picker with field and dropdown navigation | JSON

Date picker with presets | JSON

Date picker with input | JSON

Date picker that closes on select | JSON

Multiple dates picker | JSON

Date picker with select-like trigger | JSON

dialog

Dialog with form | JSON

Dialog with bare footer | JSON

Dialog opened from menu | JSON

Nested dialogs | JSON

Dialog with close confirmation | JSON

Dialog with long content | JSON

drawer

Simple bottom drawer with close button | JSON

Bottom drawer without drag bar | JSON

Drawer with close button | JSON

Inset variant drawers for all four positions | JSON

Straight variant drawers for all four positions | JSON

Scrollable content with terms and conditions | JSON

Nested bottom drawers with centered content | JSON

Nested right drawers with inset variant | JSON

Bottom drawer with snap points | JSON

Edit profile form with default and bare footer variants | JSON

Mobile menu drawer from the left | JSON

Responsive edit profile: dialog on desktop, drawer on mobile | JSON

Responsive actions menu: menu on desktop, drawer on mobile | JSON

Left drawer with swipe area | JSON

empty

Empty state with icon and actions | JSON

field

Field with description | JSON

Field with required indicator | JSON

Field in disabled state | JSON

Field showing validation error | JSON

Show field validity state | JSON

Input group with field | JSON

Field with autocomplete | JSON

Field with combobox | JSON

Field with multiple selection combobox | JSON

Field with textarea | JSON

Field with select | JSON

Field with checkbox | JSON

Field with checkbox group | JSON

Field with radio group | JSON

Field with toggle switch | JSON

Field with slider | JSON

Field with number field | JSON

Complete form built with field | JSON

fieldset

Fieldset with multiple fields | JSON

form

Input in a form | JSON

Form with zod validation | JSON

frame

Basic frame | JSON

Frame with multiple separated panels | JSON

Frame with multiple stacked panels | JSON

Frame with collapsible content and delete button | JSON

group

Basic group | JSON

Group with input | JSON

Small group | JSON

Large group | JSON

Group with disabled button | JSON

Group with default button | JSON

Group with start text | JSON

Group with end text | JSON

Vertical group | JSON

Nested groups | JSON

Group with popup | JSON

Group with input group | JSON

Group with menu | JSON

Group with select | JSON

Group with search | JSON

Group with add button and input | JSON

Group with input and currency text | JSON

Group with select and input | JSON

Group with input and select | JSON

Group with input and text button | JSON

Group with two number inputs for range | JSON

Group with filter label, combobox multi-select, and remove button | JSON

input

Basic input | JSON

Small input | JSON

Large input | JSON

Disabled input | JSON

File input | JSON

Input with label | JSON

Input with button using Group | JSON

Input with start text and end tooltip | JSON

Password input with toggle visibility | JSON

Input group mimicking a URL bar | JSON

Input group with keyboard shortcut | JSON

Input group with start loading spinner | JSON

Input with label and required indicator | JSON

Input with optional label | JSON

Input with custom border and background | JSON

Input group with end loading spinner | JSON

Read-only input | JSON

Input with characters remaining counter | JSON

Pill-shaped input | JSON

input-group

Basic input group | JSON

Input group with end icon | JSON

Input group with start text | JSON

Input group with end text | JSON

Input group with start and end text | JSON

Input group with number field | JSON

Input group with end tooltip | JSON

Input group with icon button | JSON

Input group with button | JSON

Input group with badge | JSON

Input group with keyboard shortcut | JSON

Input group with inner label | JSON

Small input group | JSON

Large input group | JSON

Disabled input group | JSON

Input group with loading spinner | JSON

Input group with textarea | JSON

Input group with badge and menu | JSON

Mini editor built with input group and toggle | JSON

Input group with search icon | JSON

Input group with start tooltip | JSON

Input group with clear button | JSON

Search input group with loader and voice button | JSON

Input group with character counter | JSON

Password input with strength indicator | JSON

Code snippet input with language selector | JSON

Message composer with attachment buttons | JSON

Chat input with voice and send buttons | JSON

kbd

Keyboard shortcuts display | JSON

meter

Basic meter | JSON

Simple meter | JSON

Meter with formatted value | JSON

Meter with range | JSON

number-field

Basic number field | JSON

Small number field | JSON

Large number field | JSON

Disabled number field | JSON

Number field with label | JSON

Number field with scrub | JSON

Number field with range | JSON

Number field with formatted value | JSON

Number field with step | JSON

Number field in form | JSON

Pill-shaped number field | JSON

otp-field

Basic OTP field | JSON

Large OTP field | JSON

OTP field with separator | JSON

OTP field with label | JSON

OTP field with custom sanitization | JSON

OTP field with auto validation | JSON

Alphanumeric OTP field | JSON

OTP field with placeholder hints | JSON

Masked OTP field | JSON

pagination

Pagination example | JSON

Pagination with previous and next buttons only | JSON

Pagination with select, and previous and next buttons | JSON

popover

Popover with a form | JSON

Popover with close button | JSON

Animated popovers | JSON

preview-card

Preview card with popup | JSON

progress

Basic progress bar | JSON

Progress with label and value | JSON

Progress with formatted value | JSON

radio-group

Basic radio group | JSON

Disabled radio group | JSON

Radio group with description | JSON

Radio group card | JSON

Radio group in form | JSON

Theme selector with image cards | JSON

scroll-area

Basic scroll area | JSON

Horizontal scroll area | JSON

Scroll area with both directions | JSON

Scroll area with fading edges | JSON

Horizontal scroll area with scrollbar gutter | JSON

select

Basic select | JSON

Small select | JSON

Large select | JSON

Disabled select | JSON

Select without item alignment | JSON

Select with groups | JSON

Multiple select | JSON

Select with icon | JSON

Select options with icon | JSON

Select with object values | JSON

Select with disabled items | JSON

Timezone select | JSON

Status select with colored dot | JSON

Pill-shaped select trigger | JSON

Select with left text label | JSON

Select with country flags | JSON

Select with description in options only | JSON

Select with avatars | JSON

Rich select with avatars and usernames | JSON

Auto width select | JSON

Select with custom border and background | JSON

Select with label | JSON

Select in form | JSON

separator

Separator with horizontal and vertical orientations | JSON

sheet

Basic sheet | JSON

Sheet inset | JSON

Sheet position | JSON

skeleton

Basic skeleton | JSON

Skeleton only | JSON

slider

Basic slider | JSON

Slider with label and value | JSON

Disabled slider | JSON

Slider with reference labels | JSON

Slider with ticks | JSON

Slider with labels above | JSON

Range slider | JSON

Slider with 3 thumbs | JSON

Range slider with collision behavior none | JSON

Range slider with collision behavior swap | JSON

Slider with icons | JSON

Slider with input | JSON

Range slider with inputs | JSON

Slider with increment and decrement buttons | JSON

Price range slider | JSON

Emoji rating slider | JSON

Vertical slider | JSON

Vertical range slider | JSON

Vertical slider with input | JSON

Equalizer with vertical sliders | JSON

Object position sliders with reset | JSON

Price slider with histogram | JSON

Slider in form | JSON

spinner

Basic spinner | JSON

switch

Basic switch | JSON

Disabled switch | JSON

Switch with description | JSON

Switch card | JSON

Switch in form | JSON

Custom size switch | JSON

table

Basic table | JSON

Frame with card-style table | JSON

Table with TanStack Table and checkboxes | JSON

Table with TanStack Table, sorting, and pagination | JSON

Card-style table variant | JSON

CardFrame with card-style table | JSON

CardFrame with TanStack Table and checkboxes | JSON

CardFrame with TanStack Table, sorting, and pagination | JSON

tabs

Basic tabs | JSON

Tabs with underline | JSON

Vertical tabs | JSON

Vertical tabs with underline | JSON

Tabs with full rounded triggers | JSON

Tabs with icon before name | JSON

Tabs with icon before name and underline | JSON

Tabs with icon only | JSON

Tabs with underline and icon on top | JSON

Tabs with count badge | JSON

Vertical tabs with underline and icon before name | JSON

Tabs with icon only and count badge | JSON

Tabs with icon only and grouped tooltips | JSON

textarea

Basic textarea | JSON

Small textarea | JSON

Large textarea | JSON

Disabled textarea | JSON

Textarea with label | JSON

Textarea in form | JSON

Textarea with label and required indicator | JSON

Textarea with optional label | JSON

Textarea with custom border and background | JSON

Read-only textarea | JSON

Textarea with characters remaining counter | JSON

Textarea field with required indicator | JSON

Shorter textarea with fixed height | JSON

Textarea with button aligned right | JSON

Textarea with button aligned left | JSON

toast

Default stacked toast with title and description | JSON

Stacked toasts by semantic type (success, error, info, warning) | JSON

Loading-state stacked toast | JSON

Stacked toast with primary action (undo) | JSON

Promise-based stacked toast | JSON

Stacked toasts with varying content height | JSON

Anchored tooltip-style toast after copy | JSON

Anchored error toast after async failure | JSON

Long-running promise toast with cancel | JSON

Deduplicated success toast | JSON

Deduplicated error toast | JSON

Anchored deduplicated success toast | JSON

Anchored deduplicated error toast | JSON

toggle

Basic toggle | JSON

Toggle with outline | JSON

Toggle with icon | JSON

Small toggle | JSON

Large toggle | JSON

Disabled toggle | JSON

Toggle icon group | JSON

Bookmark toggle with tooltip and success toast | JSON

toggle-group

Basic toggle group | JSON

Small toggle group | JSON

Large toggle group | JSON

Toggle group with outline | JSON

Vertical toggle group with outline | JSON

Disabled toggle group | JSON

Toggle group with disabled item | JSON

Multiple selection toggle group | JSON

Toggle group with tooltips | JSON

toolbar

Toolbar with toggles, buttons, and select | JSON

tooltip

Basic tooltip | JSON

Grouped tooltips | JSON

Toggle group animated tooltip | JSON

Vertical group with animated tooltip | JSON

coss-particles