Introduction
Coss UI primitives — documented on coss.com, not duplicated here.
Cal.com product UI is built on Coss UI (@coss/ui) — accessible primitives styled with Tailwind on Base UI.
Because Cal owns Coss, we do not replicate the full component catalog in this app. Use coss.com/ui for Button, Dialog, Field, Input, Select, Table, and every other primitive API.
What lives where
| Surface | Where |
|---|---|
| Coss primitives | coss.com/ui — install via shadcn CLI, browse props and examples |
| Cal foundations | Foundations — icons, typography, Cal-specific visual rules |
| Cal guides | Guides — how we compose primitives for recurring product problems |
| Product UI | Product UI — Shared, Feature, and App-owned reusable controls |
Import convention
Import primitives directly from source files — not barrel exports:
import { Button } from "@coss/ui/components/button";
import { Dialog, DialogPopup, DialogHeader, DialogTitle } from "@coss/ui/components/dialog";
import { Field, FieldLabel, FieldError } from "@coss/ui/components/field";See Definitions for how Primitives, Particles, Atoms, and Product UI relate.
When to add docs here vs on coss.com
| Change | Where |
|---|---|
| New or updated primitive API | coss.com/ui (Coss docs) |
| How Cal uses a primitive in settings, tables, forms | This app — Guides or Product UI |
Repeated Cal-only composition extracted to shared/ | Product UI (Shared badge) + the component in packages/coss-ui/src/shared |
If you need a primitive reference while building Cal UI, open Coss UI ↗ from the sidebar.