āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/cosscom/coss/(root)/get-started ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
This guide provides the essentials for adding coss ui components to your React application.
Our components are built with Tailwind CSS v4. Before you begin, make sure you have a React project set up with Tailwind CSS.
You can add components automatically with the shadcn CLI or manually by copying the files. Both methods work for primitives, particles, and atoms.
Each component page provides a command to add it to your project automatically. The CLI will create the necessary files and install any dependencies for you.
You can install all coss ui primitives at once with a single command:
npx shadcn@latest add @coss/ui
This will add all UI components to your project in one go, including button, card, avatar, dialog, tabs, and more.
components/ui/button.tsx) and paste the code.Components are styled with the design token system we use at Cal.com, which is defined by CSS variables and implemented with Tailwind CSS.
The variables are the same as shadcn/ui, and are fully customizable. You can modify them in your global stylesheet (e.g., app/globals.css) to match your design system.
We've introduced a few additional tokens to provide more granular control:
--destructive-foreground: Used for destructive-outline buttons, destructive menu items, badges, and field errors--info and --info-foreground: Commonly used for info-colored badges, toast types, and alerts--success and --success-foreground: Used for success-colored badges, toast types, and alerts--warning and --warning-foreground: Used for warning-colored badges, toast types, and alertsImportant: If you manually import components, you must also import these additional tokens in your CSS file (e.g., app/globals.css). However, if you use the CLI to import components, these tokens will be automatically imported and configured for you.
For developers migrating from Radix UI, many of our UI primitives include instructions and examples for translating equivalent Radix components to Base UI. This ensures a smooth transition while preserving accessibility, behaviors, and API patterns.
We structure the documentation to make the components AI-friendly, so language models can understand, reason about, and modify them. To support this, we include:
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā