FreePublished on GitHub

coss-particles

Find reusable interface examples built with coss UI components. Match forms, dialogs, calendars, and other interface needs to indexed patterns, retrieve their source code through JSON links, and adapt the code for your project.

OriginalShow the original 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.

crafter-station/petdex

See how to install

Good for

Building a form with input validation
Adding a dialog containing a form
Implementing date and date range selection
Adapting profile editing for desktop and mobile

Files included (1)

SKILL.md40.6 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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 (4)
alert (7)
alert-dialog (2)
autocomplete (15)
avatar (14)
badge (20)
breadcrumb (7)
button (40)
calendar (24)
card (11)
checkbox (5)
checkbox-group (5)
collapsible (1)
combobox (18)
command (2)
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)
number-field (11)
otp-field (9)
pagination (3)
popover (3)
preview-card (1)
progress (3)
radio-group (6)
scroll-area (5)
select (23)
separator (1)
sheet (3)
skeleton (2)
slider (23)
spinner (1)
switch (6)
table (8)
tabs (13)
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

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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

More skills from this repository

code-review-excellence

FreeSummary

Review code changes for bugs, security risks, design issues, and test quality, then turn findings into specific, prioritized feedback. Use its checklists and comment templates to establish consistent review standards and support developer mentoring.

Reviewing pull requests
Creating team review checklists
Mentoring junior developers through feedback

crafter-station/petdex4.3KUpdated Oct 11, 2026

coss

FreeSummary

Build React interfaces with coss components using documented imports, properties, and composition patterns. It helps select components, implement forms and overlays, preserve accessibility, and address migration mistakes when moving from shadcn/Radix to coss/Base UI.

Building forms and dialogs with coss
Migrating from shadcn/Radix to coss/Base UI
Troubleshooting menus, selects, and notifications

crafter-station/petdex4.3KUpdated Oct 11, 2026

petdex

FreeSummary

Browse and install pixel art pets with the Petdex CLI, a command line tool. Submit your own artwork with a chosen license, or update descriptions and sprite images for pets you own.

Finding and installing a coding companion
Installing several pets from the catalog
Submitting original pet artwork with a chosen license

crafter-station/petdex4.3KUpdated Oct 11, 2026

See all skills by crafter-station

Report a problem with this skill

Install

Install with a command

npx skills add https://github.com/crafter-station/petdex --skill coss-particles

Paste it into your terminal and run it (requires Node.js). You can choose which agents to install it for, such as Claude Code or Codex.

Ask your agent

Please install the following Agent Skill.
https://github.com/crafter-station/petdex/tree/main/.agents/skills/coss-particles

First review SKILL.md and the bundled files and confirm there is nothing suspicious (such as sending data externally or reading credentials). Then place it in ~/.claude/skills/coss-particles/ for Claude Code, or ~/.agents/skills/coss-particles/ for Codex.

Send this text to Claude Code or Codex as is. It checks the contents before installing.

View source on GitHub

Repository: crafter-station/petdex
Stars: 4,260
Forks: 210
Category: Development
License: MIT
Original language: English
Last updated: Oct 11, 2026

A skill is a set of instructions and scripts for an agent. cccskills does not guarantee that skills are safe. Review the contents before you install.

Good for

Files included (1)

SKILL.md (original)

COSS UI Particles Index

How to use this skill

JSON URL pattern

Source code

Updating this index

Component types

accordion

alert

alert-dialog

autocomplete

avatar

badge

breadcrumb

button

calendar

card

checkbox

checkbox-group

collapsible

combobox

command

date-picker

dialog

drawer

empty

field

fieldset

form

frame

group

input

input-group

kbd

menu

meter

number-field

otp-field

pagination

popover

preview-card

progress

radio-group

scroll-area

select

separator

sheet

skeleton

slider

spinner

switch

table

tabs

textarea

toast

toggle

toggle-group

toolbar

tooltip

Reviews

Comments

More skills from this repository

code-review-excellence

coss

petdex