coss-particles

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/.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 (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 (9) 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 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 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 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