| 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
- 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: 480 particles across 52 component types
Component types
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 |
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
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
kbd
- Keyboard shortcuts display | JSON
menu
- Basic menu | JSON
- Menu with hover | JSON
- Menu with checkbox | JSON
- Menu with checkbox items as switches | JSON
- Menu with radio group | JSON
- Menu with link | JSON
- Menu with group labels | JSON
- Nested menu | JSON
- Menu close on click | 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
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
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
- Basic toast | JSON
- Toast with status | JSON
- Loading toast | JSON
- Toast with action | JSON
- Promise toast | JSON
- Toast with varying heights | JSON
- Anchored toast with tooltip style | JSON
- Anchored toast | JSON
- Promise toast with cancel action | 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
