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 4,079 stars 197 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
4 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.

4,079 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).

6 Updated today
lukedj78
Web & Frontend Listed

ui-kit

Exhaustive, domain-agnostic UI/UX Component Engine & Design Intelligence. Curated from Beautiful UI (beautifului.dev - 20 AI primitives), Shadcn UI (ui.shadcn.com - 50+ components), BeUI (beui.dev), Rare UI (rareui.com), and Transitions.dev. Provides copy-paste primitives for AI Thinking states, Streaming text, Tool chips, Approval cards, Task rows, Flowcharts, Insight sparklines, Bento grids, Physics transitions, and accessible UI controls for any tech stack (React, Next.js, Vue, Tailwind, HTML/Vanilla, Flutter) in any visual style or language (LTR/RTL).

0 Updated 1 weeks ago
omid-io