---
name: "@coss"
slug: "coss"
description: "The official Cal.com design system, formerly known as Origin UI, now under coss.com/ui. A modern, TypeScript-first component library built on Base UI (not Radix UI), designed for developers and AI-assisted tooling. Covers standard UI primitives with Cal.com's visual language — clean, minimal, developer-focused. Monorepo includes apps/origin legacy components. Free and open source. Use for: adopting the Cal.com design system's Base UI primitives when you want an alternative to Radix-based shadcn with a battle-tested real-world design system behind it."
category: "Design system"
tags: ["ai", "auth", "buttons", "cards", "components", "dashboard", "design-system", "forms", "hooks", "loaders", "media", "navigation", "overlays", "tables"]
framework: "react"
license: "AGPL-3.0"
author: "cosscom"
website: "https://coss.com/ui"
github: "https://github.com/cosscom/coss"
registry: "https://coss.com/ui/r/registry.json"
pro: false
pro_url: null
github_stars: 10204
component_count: 250
generated_at: "2026-07-28T08:00:50.948Z"
---

# @coss

The official Cal.com design system, formerly known as Origin UI, now under coss.com/ui. A modern, TypeScript-first component library built on Base UI (not Radix UI), designed for developers and AI-assisted tooling. Covers standard UI primitives with Cal.com's visual language — clean, minimal, developer-focused. Monorepo includes apps/origin legacy components. Free and open source. Use for: adopting the Cal.com design system's Base UI primitives when you want an alternative to Radix-based shadcn with a battle-tested real-world design system behind it.

## Links

- Website: https://coss.com/ui
- GitHub: https://github.com/cosscom/coss
- Registry JSON: https://coss.com/ui/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/coss
- This file: https://sh4dcn.vercel.app/md/coss.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://coss.com/ui/r/registry.json
pnpm dlx shadcn@latest add https://coss.com/ui/r/registry.json
bunx shadcn@latest add https://coss.com/ui/r/registry.json
# clone the source repo
git clone https://github.com/cosscom/coss.git
# fetch the raw registry index
curl -s https://coss.com/ui/r/registry.json
```

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| ui | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/ui.json` |
| accordion | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/accordion.json` |
| alert | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/alert.json` |
| alert-dialog | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/alert-dialog.json` |
| autocomplete | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/autocomplete.json` |
| avatar | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/avatar.json` |
| badge | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/badge.json` |
| breadcrumb | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/breadcrumb.json` |
| button | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/button.json` |
| calendar | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/calendar.json` |
| card | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/card.json` |
| checkbox | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/checkbox.json` |
| checkbox-group | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/checkbox-group.json` |
| collapsible | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/collapsible.json` |
| combobox | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/combobox.json` |
| command | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/command.json` |
| context-menu | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/context-menu.json` |
| dialog | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/dialog.json` |
| drawer | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/drawer.json` |
| empty | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/empty.json` |
| field | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/field.json` |
| fieldset | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/fieldset.json` |
| form | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/form.json` |
| frame | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/frame.json` |
| group | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/group.json` |
| input | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/input.json` |
| otp-field | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/otp-field.json` |
| input-group | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/input-group.json` |
| kbd | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/kbd.json` |
| label | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/label.json` |
| menu | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/menu.json` |
| meter | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/meter.json` |
| number-field | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/number-field.json` |
| pagination | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/pagination.json` |
| popover | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/popover.json` |
| preview-card | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/preview-card.json` |
| progress | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/progress.json` |
| radio-group | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/radio-group.json` |
| scroll-area | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/scroll-area.json` |
| select | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/select.json` |
| separator | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/separator.json` |
| sheet | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/sheet.json` |
| sidebar | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/sidebar.json` |
| skeleton | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/skeleton.json` |
| slider | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/slider.json` |
| spinner | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/spinner.json` |
| switch | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/switch.json` |
| table | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/table.json` |
| tabs | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/tabs.json` |
| textarea | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/textarea.json` |
| toast | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/toast.json` |
| toggle | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/toggle.json` |
| toggle-group | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/toggle-group.json` |
| toolbar | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/toolbar.json` |
| tooltip | registry:ui | — | `npx shadcn@latest add https://coss.com/ui/r/tooltip.json` |
| p-accordion-1 | registry:block | Basic accordion | `npx shadcn@latest add https://coss.com/ui/r/p-accordion-1.json` |
| p-accordion-2 | registry:block | Accordion with one panel open | `npx shadcn@latest add https://coss.com/ui/r/p-accordion-2.json` |
| p-accordion-3 | registry:block | Accordion allowing multiple panels open | `npx shadcn@latest add https://coss.com/ui/r/p-accordion-3.json` |
| p-accordion-4 | registry:block | Controlled accordion | `npx shadcn@latest add https://coss.com/ui/r/p-accordion-4.json` |
| p-alert-1 | registry:block | Basic alert | `npx shadcn@latest add https://coss.com/ui/r/p-alert-1.json` |
| p-alert-2 | registry:block | Alert with icon | `npx shadcn@latest add https://coss.com/ui/r/p-alert-2.json` |
| p-alert-3 | registry:block | Alert with icon and action buttons | `npx shadcn@latest add https://coss.com/ui/r/p-alert-3.json` |
| p-alert-4 | registry:block | Info alert | `npx shadcn@latest add https://coss.com/ui/r/p-alert-4.json` |
| p-alert-5 | registry:block | Success alert | `npx shadcn@latest add https://coss.com/ui/r/p-alert-5.json` |
| p-alert-6 | registry:block | Warning alert | `npx shadcn@latest add https://coss.com/ui/r/p-alert-6.json` |
| p-alert-7 | registry:block | Error alert | `npx shadcn@latest add https://coss.com/ui/r/p-alert-7.json` |
| p-alert-dialog-1 | registry:block | Alert dialog | `npx shadcn@latest add https://coss.com/ui/r/p-alert-dialog-1.json` |
| p-alert-dialog-2 | registry:block | Alert dialog with bare footer | `npx shadcn@latest add https://coss.com/ui/r/p-alert-dialog-2.json` |
| p-autocomplete-1 | registry:block | Basic autocomplete | `npx shadcn@latest add https://coss.com/ui/r/p-autocomplete-1.json` |
| p-autocomplete-2 | registry:block | Disabled autocomplete | `npx shadcn@latest add https://coss.com/ui/r/p-autocomplete-2.json` |
| p-autocomplete-3 | registry:block | Small autocomplete | `npx shadcn@latest add https://coss.com/ui/r/p-autocomplete-3.json` |
| p-autocomplete-4 | registry:block | Large autocomplete | `npx shadcn@latest add https://coss.com/ui/r/p-autocomplete-4.json` |
| p-autocomplete-5 | registry:block | Autocomplete with label | `npx shadcn@latest add https://coss.com/ui/r/p-autocomplete-5.json` |
| p-autocomplete-6 | registry:block | Autocomplete autofilling the input with the highlighted item | `npx shadcn@latest add https://coss.com/ui/r/p-autocomplete-6.json` |
| p-autocomplete-7 | registry:block | Autocomplete auto highlighting the first option | `npx shadcn@latest add https://coss.com/ui/r/p-autocomplete-7.json` |
| p-autocomplete-8 | registry:block | Autocomplete with clear button | `npx shadcn@latest add https://coss.com/ui/r/p-autocomplete-8.json` |
| p-autocomplete-9 | registry:block | Autocomplete with trigger and clear buttons | `npx shadcn@latest add https://coss.com/ui/r/p-autocomplete-9.json` |
| p-autocomplete-10 | registry:block | Autocomplete with grouped items | `npx shadcn@latest add https://coss.com/ui/r/p-autocomplete-10.json` |
| p-autocomplete-11 | registry:block | Autocomplete with limited number of results | `npx shadcn@latest add https://coss.com/ui/r/p-autocomplete-11.json` |
| p-autocomplete-12 | registry:block | Autocomplete with async items loading | `npx shadcn@latest add https://coss.com/ui/r/p-autocomplete-12.json` |
| p-autocomplete-13 | registry:block | Autocomplete form | `npx shadcn@latest add https://coss.com/ui/r/p-autocomplete-13.json` |
| p-autocomplete-14 | registry:block | Autocomplete form | `npx shadcn@latest add https://coss.com/ui/r/p-autocomplete-14.json` |
| p-autocomplete-15 | registry:block | Pill-shaped autocomplete | `npx shadcn@latest add https://coss.com/ui/r/p-autocomplete-15.json` |
| p-autocomplete-16 | registry:block | Address autocomplete with Google Maps Places API | `npx shadcn@latest add https://coss.com/ui/r/p-autocomplete-16.json` |
| p-avatar-1 | registry:block | Avatar with image and fallback | `npx shadcn@latest add https://coss.com/ui/r/p-avatar-1.json` |
| p-avatar-2 | registry:block | Fallback-only avatar | `npx shadcn@latest add https://coss.com/ui/r/p-avatar-2.json` |
| p-avatar-3 | registry:block | Avatars with different sizes | `npx shadcn@latest add https://coss.com/ui/r/p-avatar-3.json` |
| p-avatar-4 | registry:block | Avatars with different radii | `npx shadcn@latest add https://coss.com/ui/r/p-avatar-4.json` |
| p-avatar-5 | registry:block | Overlapping avatar group | `npx shadcn@latest add https://coss.com/ui/r/p-avatar-5.json` |
| p-avatar-6 | registry:block | Avatar with user icon fallback | `npx shadcn@latest add https://coss.com/ui/r/p-avatar-6.json` |
| p-avatar-7 | registry:block | Avatar with emerald status dot | `npx shadcn@latest add https://coss.com/ui/r/p-avatar-7.json` |
| p-avatar-8 | registry:block | Avatar with muted status dot | `npx shadcn@latest add https://coss.com/ui/r/p-avatar-8.json` |
| p-avatar-9 | registry:block | Rounded avatar with top-right emerald status | `npx shadcn@latest add https://coss.com/ui/r/p-avatar-9.json` |
| p-avatar-10 | registry:block | Avatar with notification badge | `npx shadcn@latest add https://coss.com/ui/r/p-avatar-10.json` |
| p-avatar-11 | registry:block | Rounded avatar with notification badge | `npx shadcn@latest add https://coss.com/ui/r/p-avatar-11.json` |
| p-avatar-12 | registry:block | Avatar with verified badge | `npx shadcn@latest add https://coss.com/ui/r/p-avatar-12.json` |
| p-avatar-13 | registry:block | Small overlapping avatar group | `npx shadcn@latest add https://coss.com/ui/r/p-avatar-13.json` |
| p-avatar-14 | registry:block | Large overlapping avatar group | `npx shadcn@latest add https://coss.com/ui/r/p-avatar-14.json` |
| p-badge-1 | registry:block | Basic badge | `npx shadcn@latest add https://coss.com/ui/r/p-badge-1.json` |
| p-badge-2 | registry:block | Outline badge | `npx shadcn@latest add https://coss.com/ui/r/p-badge-2.json` |
| p-badge-3 | registry:block | Secondary badge | `npx shadcn@latest add https://coss.com/ui/r/p-badge-3.json` |
| p-badge-4 | registry:block | Destructive badge | `npx shadcn@latest add https://coss.com/ui/r/p-badge-4.json` |
| p-badge-5 | registry:block | Info badge | `npx shadcn@latest add https://coss.com/ui/r/p-badge-5.json` |
| p-badge-6 | registry:block | Success badge | `npx shadcn@latest add https://coss.com/ui/r/p-badge-6.json` |
| p-badge-7 | registry:block | Warning badge | `npx shadcn@latest add https://coss.com/ui/r/p-badge-7.json` |
| p-badge-8 | registry:block | Error badge | `npx shadcn@latest add https://coss.com/ui/r/p-badge-8.json` |
| p-badge-9 | registry:block | Small badge | `npx shadcn@latest add https://coss.com/ui/r/p-badge-9.json` |
| p-badge-10 | registry:block | Large badge | `npx shadcn@latest add https://coss.com/ui/r/p-badge-10.json` |
| p-badge-11 | registry:block | Badge with icon | `npx shadcn@latest add https://coss.com/ui/r/p-badge-11.json` |
| p-badge-12 | registry:block | Badge with link | `npx shadcn@latest add https://coss.com/ui/r/p-badge-12.json` |
| p-badge-13 | registry:block | Badge with count | `npx shadcn@latest add https://coss.com/ui/r/p-badge-13.json` |
| p-badge-14 | registry:block | Full rounded badge (pill) | `npx shadcn@latest add https://coss.com/ui/r/p-badge-14.json` |
| p-badge-15 | registry:block | Badge with number after text | `npx shadcn@latest add https://coss.com/ui/r/p-badge-15.json` |
| p-badge-16 | registry:block | Status badge - Paid | `npx shadcn@latest add https://coss.com/ui/r/p-badge-16.json` |
| p-badge-17 | registry:block | Status badge - Pending | `npx shadcn@latest add https://coss.com/ui/r/p-badge-17.json` |
| p-badge-18 | registry:block | Status badge - Failed | `npx shadcn@latest add https://coss.com/ui/r/p-badge-18.json` |
| p-badge-19 | registry:block | Selectable badge with checkbox | `npx shadcn@latest add https://coss.com/ui/r/p-badge-19.json` |
| p-badge-20 | registry:block | Removable badge | `npx shadcn@latest add https://coss.com/ui/r/p-badge-20.json` |
| p-breadcrumb-1 | registry:block | Breadcrumb with menu example | `npx shadcn@latest add https://coss.com/ui/r/p-breadcrumb-1.json` |
| p-breadcrumb-2 | registry:block | Breadcrumb with custom separator | `npx shadcn@latest add https://coss.com/ui/r/p-breadcrumb-2.json` |
| p-breadcrumb-3 | registry:block | Breadcrumb with home icon for home link only | `npx shadcn@latest add https://coss.com/ui/r/p-breadcrumb-3.json` |
| p-breadcrumb-4 | registry:block | Breadcrumb with folders icon menu | `npx shadcn@latest add https://coss.com/ui/r/p-breadcrumb-4.json` |
| p-breadcrumb-5 | registry:block | Breadcrumb with icons before text | `npx shadcn@latest add https://coss.com/ui/r/p-breadcrumb-5.json` |
| p-breadcrumb-6 | registry:block | Breadcrumb with dot separators | `npx shadcn@latest add https://coss.com/ui/r/p-breadcrumb-6.json` |
| p-breadcrumb-7 | registry:block | Breadcrumb with select dropdown | `npx shadcn@latest add https://coss.com/ui/r/p-breadcrumb-7.json` |
| p-button-1 | registry:block | Default button | `npx shadcn@latest add https://coss.com/ui/r/p-button-1.json` |
| p-button-2 | registry:block | Outline button | `npx shadcn@latest add https://coss.com/ui/r/p-button-2.json` |
| p-button-3 | registry:block | Secondary button | `npx shadcn@latest add https://coss.com/ui/r/p-button-3.json` |
| p-button-4 | registry:block | Destructive button | `npx shadcn@latest add https://coss.com/ui/r/p-button-4.json` |
| p-button-5 | registry:block | Destructive outline button | `npx shadcn@latest add https://coss.com/ui/r/p-button-5.json` |
| p-button-6 | registry:block | Ghost button | `npx shadcn@latest add https://coss.com/ui/r/p-button-6.json` |
| p-button-7 | registry:block | Link button | `npx shadcn@latest add https://coss.com/ui/r/p-button-7.json` |
| p-button-8 | registry:block | Extra-small button | `npx shadcn@latest add https://coss.com/ui/r/p-button-8.json` |
| p-button-9 | registry:block | Small button | `npx shadcn@latest add https://coss.com/ui/r/p-button-9.json` |
| p-button-10 | registry:block | Large button | `npx shadcn@latest add https://coss.com/ui/r/p-button-10.json` |
| p-button-11 | registry:block | Extra-large button | `npx shadcn@latest add https://coss.com/ui/r/p-button-11.json` |
| p-button-12 | registry:block | Disabled button | `npx shadcn@latest add https://coss.com/ui/r/p-button-12.json` |
| p-button-13 | registry:block | Icon button | `npx shadcn@latest add https://coss.com/ui/r/p-button-13.json` |
| p-button-14 | registry:block | Small icon button | `npx shadcn@latest add https://coss.com/ui/r/p-button-14.json` |
| p-button-15 | registry:block | Large icon button | `npx shadcn@latest add https://coss.com/ui/r/p-button-15.json` |
| p-button-16 | registry:block | Button with icon | `npx shadcn@latest add https://coss.com/ui/r/p-button-16.json` |
| p-button-17 | registry:block | Link rendered as button | `npx shadcn@latest add https://coss.com/ui/r/p-button-17.json` |
| p-button-41 | registry:block | Button using the built-in loading prop | `npx shadcn@latest add https://coss.com/ui/r/p-button-41.json` |
| p-button-18 | registry:block | Custom loading button with manual Spinner | `npx shadcn@latest add https://coss.com/ui/r/p-button-18.json` |
| p-button-19 | registry:block | Expandable show more/less toggle button | `npx shadcn@latest add https://coss.com/ui/r/p-button-19.json` |
| p-button-20 | registry:block | Back link button with chevron | `npx shadcn@latest add https://coss.com/ui/r/p-button-20.json` |
| p-button-21 | registry:block | Card-style button with heading and description | `npx shadcn@latest add https://coss.com/ui/r/p-button-21.json` |
| p-button-22 | registry:block | Directional pad control buttons | `npx shadcn@latest add https://coss.com/ui/r/p-button-22.json` |
| p-button-23 | registry:block | Outline like button with count | `npx shadcn@latest add https://coss.com/ui/r/p-button-23.json` |
| p-button-24 | registry:block | Social login icon buttons | `npx shadcn@latest add https://coss.com/ui/r/p-button-24.json` |
| p-button-26 | registry:block | Star button with count badge | `npx shadcn@latest add https://coss.com/ui/r/p-button-26.json` |
| p-button-27 | registry:block | Button group with QR code icon and sign in | `npx shadcn@latest add https://coss.com/ui/r/p-button-27.json` |
| p-button-28 | registry:block | Button with avatar | `npx shadcn@latest add https://coss.com/ui/r/p-button-28.json` |
| p-button-29 | registry:block | Pill-shaped button with rounded-full styling | `npx shadcn@latest add https://coss.com/ui/r/p-button-29.json` |
| p-button-30 | registry:block | Button with animated arrow on hover | `npx shadcn@latest add https://coss.com/ui/r/p-button-30.json` |
| p-button-31 | registry:block | Button with keyboard shortcut indicator | `npx shadcn@latest add https://coss.com/ui/r/p-button-31.json` |
| p-button-32 | registry:block | Button with notification badge | `npx shadcn@latest add https://coss.com/ui/r/p-button-32.json` |
| p-button-33 | registry:block | Paired buttons (Cancel/Save) | `npx shadcn@latest add https://coss.com/ui/r/p-button-33.json` |
| p-button-34 | registry:block | Button with animated status dot | `npx shadcn@latest add https://coss.com/ui/r/p-button-34.json` |
| p-button-35 | registry:block | Icon-only copy button with feedback | `npx shadcn@latest add https://coss.com/ui/r/p-button-35.json` |
| p-button-36 | registry:block | Copy button with feedback | `npx shadcn@latest add https://coss.com/ui/r/p-button-36.json` |
| p-button-37 | registry:block | Rotating icon button (FAB-style toggle) | `npx shadcn@latest add https://coss.com/ui/r/p-button-37.json` |
| p-button-39 | registry:block | Hamburger menu button with animated icon | `npx shadcn@latest add https://coss.com/ui/r/p-button-39.json` |
| p-button-40 | registry:block | Download button with progress and cancel action | `npx shadcn@latest add https://coss.com/ui/r/p-button-40.json` |
| p-button-38 | registry:block | Social login buttons (Google, X, GitHub) | `npx shadcn@latest add https://coss.com/ui/r/p-button-38.json` |
| p-calendar-1 | registry:block | Basic calendar | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-1.json` |
| p-calendar-3 | registry:block | Calendar with date range selection | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-3.json` |
| p-calendar-4 | registry:block | Calendar with month/year dropdown navigation | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-4.json` |
| p-calendar-5 | registry:block | Calendar with custom Select dropdown for month/year | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-5.json` |
| p-calendar-6 | registry:block | Calendar with Combobox dropdown for month/year | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-6.json` |
| p-calendar-7 | registry:block | Calendar with disabled dates | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-7.json` |
| p-calendar-8 | registry:block | Calendar with multiple date selection | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-8.json` |
| p-calendar-2 | registry:block | Calendar with custom cell size | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-2.json` |
| p-calendar-9 | registry:block | Calendar with rounded day buttons | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-9.json` |
| p-calendar-10 | registry:block | Calendar with rounded range selection style | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-10.json` |
| p-calendar-11 | registry:block | Calendar with right-aligned navigation | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-11.json` |
| p-calendar-12 | registry:block | Calendar with week numbers | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-12.json` |
| p-calendar-13 | registry:block | Calendar with year-only combobox dropdown | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-13.json` |
| p-calendar-14 | registry:block | Calendar without arrow navigation (dropdown only) | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-14.json` |
| p-calendar-15 | registry:block | Calendar with current month button | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-15.json` |
| p-calendar-16 | registry:block | Calendar with today button | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-16.json` |
| p-calendar-17 | registry:block | Calendar with date input | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-17.json` |
| p-calendar-18 | registry:block | Calendar with time input | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-18.json` |
| p-calendar-19 | registry:block | Calendar with time slots (appointment picker) | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-19.json` |
| p-calendar-20 | registry:block | Calendar with date presets | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-20.json` |
| p-calendar-21 | registry:block | Range calendar with date presets | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-21.json` |
| p-calendar-22 | registry:block | Two months calendar | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-22.json` |
| p-calendar-23 | registry:block | Three months calendar | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-23.json` |
| p-calendar-24 | registry:block | Pricing calendar with custom day buttons | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-24.json` |
| p-calendar-25 | registry:block | Calendar with 24-hour autocomplete time input | `npx shadcn@latest add https://coss.com/ui/r/p-calendar-25.json` |
| p-date-picker-1 | registry:block | Basic date picker | `npx shadcn@latest add https://coss.com/ui/r/p-date-picker-1.json` |
| p-date-picker-2 | registry:block | Date range picker | `npx shadcn@latest add https://coss.com/ui/r/p-date-picker-2.json` |
| p-date-picker-9 | registry:block | Two months calendar with range date | `npx shadcn@latest add https://coss.com/ui/r/p-date-picker-9.json` |
| p-date-picker-3 | registry:block | Date picker with field and dropdown navigation | `npx shadcn@latest add https://coss.com/ui/r/p-date-picker-3.json` |
| p-date-picker-4 | registry:block | Date picker with presets | `npx shadcn@latest add https://coss.com/ui/r/p-date-picker-4.json` |
| p-date-picker-5 | registry:block | Date picker with input | `npx shadcn@latest add https://coss.com/ui/r/p-date-picker-5.json` |
| p-date-picker-6 | registry:block | Date picker that closes on select | `npx shadcn@latest add https://coss.com/ui/r/p-date-picker-6.json` |
| p-date-picker-7 | registry:block | Multiple dates picker | `npx shadcn@latest add https://coss.com/ui/r/p-date-picker-7.json` |
| p-date-picker-8 | registry:block | Date picker with select-like trigger | `npx shadcn@latest add https://coss.com/ui/r/p-date-picker-8.json` |
| p-card-1 | registry:block | A basic card with header and footer | `npx shadcn@latest add https://coss.com/ui/r/p-card-1.json` |
| p-card-2 | registry:block | Authentication card with actions | `npx shadcn@latest add https://coss.com/ui/r/p-card-2.json` |
| p-card-3 | registry:block | Authentication card with separators | `npx shadcn@latest add https://coss.com/ui/r/p-card-3.json` |
| p-card-4 | registry:block | Framed card with footer | `npx shadcn@latest add https://coss.com/ui/r/p-card-4.json` |
| p-card-5 | registry:block | Framed card with header | `npx shadcn@latest add https://coss.com/ui/r/p-card-5.json` |
| p-card-6 | registry:block | Framed card with header and footer | `npx shadcn@latest add https://coss.com/ui/r/p-card-6.json` |
| p-card-7 | registry:block | Framed card with no rounded bottom | `npx shadcn@latest add https://coss.com/ui/r/p-card-7.json` |
| p-card-8 | registry:block | Card within a frame and footer | `npx shadcn@latest add https://coss.com/ui/r/p-card-8.json` |
| p-card-9 | registry:block | Card within a frame and footer | `npx shadcn@latest add https://coss.com/ui/r/p-card-9.json` |
| p-card-10 | registry:block | Card within a frame with header and footer | `npx shadcn@latest add https://coss.com/ui/r/p-card-10.json` |
| p-card-11 | registry:block | CardFrame with header action | `npx shadcn@latest add https://coss.com/ui/r/p-card-11.json` |
| p-checkbox-1 | registry:block | Basic checkbox | `npx shadcn@latest add https://coss.com/ui/r/p-checkbox-1.json` |
| p-checkbox-2 | registry:block | Disabled checkbox | `npx shadcn@latest add https://coss.com/ui/r/p-checkbox-2.json` |
| p-checkbox-3 | registry:block | Checkbox with description | `npx shadcn@latest add https://coss.com/ui/r/p-checkbox-3.json` |
| p-checkbox-4 | registry:block | Card-style checkbox | `npx shadcn@latest add https://coss.com/ui/r/p-checkbox-4.json` |
| p-checkbox-5 | registry:block | Checkbox form | `npx shadcn@latest add https://coss.com/ui/r/p-checkbox-5.json` |
| p-checkbox-group-1 | registry:block | Basic checkbox group | `npx shadcn@latest add https://coss.com/ui/r/p-checkbox-group-1.json` |
| p-checkbox-group-2 | registry:block | Checkbox group with disabled items | `npx shadcn@latest add https://coss.com/ui/r/p-checkbox-group-2.json` |
| p-checkbox-group-3 | registry:block | Checkbox group with parent checkbox | `npx shadcn@latest add https://coss.com/ui/r/p-checkbox-group-3.json` |
| p-checkbox-group-4 | registry:block | Nested checkbox group with parent | `npx shadcn@latest add https://coss.com/ui/r/p-checkbox-group-4.json` |
| p-checkbox-group-5 | registry:block | Checkbox group form | `npx shadcn@latest add https://coss.com/ui/r/p-checkbox-group-5.json` |
| p-collapsible-1 | registry:block | Basic collapsible | `npx shadcn@latest add https://coss.com/ui/r/p-collapsible-1.json` |
| p-combobox-1 | registry:block | Basic combobox | `npx shadcn@latest add https://coss.com/ui/r/p-combobox-1.json` |
| p-combobox-2 | registry:block | Disabled combobox | `npx shadcn@latest add https://coss.com/ui/r/p-combobox-2.json` |
| p-combobox-3 | registry:block | Small combobox | `npx shadcn@latest add https://coss.com/ui/r/p-combobox-3.json` |
| p-combobox-4 | registry:block | Large combobox | `npx shadcn@latest add https://coss.com/ui/r/p-combobox-4.json` |
| p-combobox-5 | registry:block | Combobox with label | `npx shadcn@latest add https://coss.com/ui/r/p-combobox-5.json` |
| p-combobox-6 | registry:block | Combobox auto highlighting the first option | `npx shadcn@latest add https://coss.com/ui/r/p-combobox-6.json` |
| p-combobox-7 | registry:block | Combobox with clear button | `npx shadcn@latest add https://coss.com/ui/r/p-combobox-7.json` |
| p-combobox-8 | registry:block | Combobox with grouped items | `npx shadcn@latest add https://coss.com/ui/r/p-combobox-8.json` |
| p-combobox-9 | registry:block | Combobox with multiple selection | `npx shadcn@latest add https://coss.com/ui/r/p-combobox-9.json` |
| p-combobox-10 | registry:block | Combobox with input inside popup | `npx shadcn@latest add https://coss.com/ui/r/p-combobox-10.json` |
| p-combobox-11 | registry:block | Combobox form | `npx shadcn@latest add https://coss.com/ui/r/p-combobox-11.json` |
| p-combobox-12 | registry:block | Combobox multiple form | `npx shadcn@latest add https://coss.com/ui/r/p-combobox-12.json` |
| p-combobox-13 | registry:block | Combobox with start addon | `npx shadcn@latest add https://coss.com/ui/r/p-combobox-13.json` |
| p-combobox-14 | registry:block | Combobox multiple with start addon | `npx shadcn@latest add https://coss.com/ui/r/p-combobox-14.json` |
| p-combobox-15 | registry:block | Pill-shaped combobox | `npx shadcn@latest add https://coss.com/ui/r/p-combobox-15.json` |
| p-combobox-16 | registry:block | Timezone combobox | `npx shadcn@latest add https://coss.com/ui/r/p-combobox-16.json` |
| p-combobox-17 | registry:block | Timezone combobox with search input | `npx shadcn@latest add https://coss.com/ui/r/p-combobox-17.json` |
| p-combobox-18 | registry:block | Combobox with select trigger | `npx shadcn@latest add https://coss.com/ui/r/p-combobox-18.json` |
| p-combobox-19 | registry:block | Combobox multiple with stacked chips | `npx shadcn@latest add https://coss.com/ui/r/p-combobox-19.json` |
| p-combobox-20 | registry:block | Combobox multiple with stacked divided chips | `npx shadcn@latest add https://coss.com/ui/r/p-combobox-20.json` |
| p-command-1 | registry:block | Command palette with dialog | `npx shadcn@latest add https://coss.com/ui/r/p-command-1.json` |
| p-command-2 | registry:block | Command palette with AI assistant | `npx shadcn@latest add https://coss.com/ui/r/p-command-2.json` |
| p-dialog-1 | registry:block | Dialog with form | `npx shadcn@latest add https://coss.com/ui/r/p-dialog-1.json` |
| p-dialog-6 | registry:block | Dialog with bare footer | `npx shadcn@latest add https://coss.com/ui/r/p-dialog-6.json` |
| p-dialog-2 | registry:block | Dialog opened from menu | `npx shadcn@latest add https://coss.com/ui/r/p-dialog-2.json` |
| p-dialog-3 | registry:block | Nested dialogs | `npx shadcn@latest add https://coss.com/ui/r/p-dialog-3.json` |
| p-dialog-4 | registry:block | Dialog with close confirmation | `npx shadcn@latest add https://coss.com/ui/r/p-dialog-4.json` |
| p-dialog-5 | registry:block | Dialog with long content | `npx shadcn@latest add https://coss.com/ui/r/p-dialog-5.json` |
| p-drawer-1 | registry:block | Simple bottom drawer with close button | `npx shadcn@latest add https://coss.com/ui/r/p-drawer-1.json` |

## For AI agents

```text
You are adding components from @coss to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/coss.md) for the component list.
2. Fetch the machine-readable index: https://coss.com/ui/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: coss).
```