coss-particles

Featured

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.

Web & Frontend 3,944 stars 185 forks Updated today MIT

Install

View on GitHub

Quality Score: 99/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# COSS UI Particles Index Particles are copy-paste-ready UI patterns built on [coss](https://coss.com/ui) 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: ```bash 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)...

Details

Author
crafter-station
Repository
crafter-station/petdex
Created
3 months ago
Last Updated
today
Language
TypeScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Featured

coss

Helps implement coss UI components correctly. Use when building UIs with coss primitives (buttons, dialogs, selects, forms, menus, tabs, 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.

3,944 Updated today
crafter-station
Web & Frontend Listed

coss-ui

Set up or extend a Next.js web app with Coss/UI — the official Cal.com design system, built on Base UI + Tailwind CSS v4 and installed through the shadcn CLI via the namespaced `@coss/*` registry. Two modes: Init (`shadcn init @coss/style` on a new project) and Add (pull `@coss/ui` primitives, single `@coss/<name>` components, or particles into an existing one). Sets `meta.json#stack.ui = "coss"`. Triggers: "usa Coss/UI", "coss.com/ui", "Cal.com design system", "aggiungi un componente Coss", "init @coss/style", "scaffold con Coss UI", or dev-flow routing when `stack.ui = "coss"`. Requires Tailwind CSS v4 and carries a mixed MIT/AGPLv3 license. Not for: writing the DESIGN.md (use figma-to-design-md / image-to-design-md), the generic Next.js scaffold (design-md-to-app owns it), backend modules (module-add), or React Native (RN uses NativeWind, not Coss).

4 Updated 4 days ago
lukedj78
Web & Frontend Solid

component-gallery

Research UI component patterns across 60 component types and 95 production design systems (2,676+ examples from component.gallery). Compare implementations, find alternative component names, ground frontend decisions in real-world precedent. Pairs with minoan-frontend-design for research-then-build workflows. Triggers on component patterns, how do others implement X, design system research, component comparison.

41 Updated yesterday
tdimino