#What is Coss UI?

Coss UI is a free, open-source React component library built on top of Base UI powerful, unstyled, accessible primitive system from MUI. Created by the team behind Calcom, its primary goal is to provide developers with beautifully designed, fully customizable, and AI-readable components that can be copied, pasted, and owned outright. Built with React, TypeScript, and Tailwind CSS, Coss UI introduces a layered architecture:

• Primitives → Unstyled, accessible Base UI building blocks

• Particles → Pre-assembled, styled patterns (e.g., auth forms, tables)

• Atoms → API-integrated, smart components with external data

Unlike traditional libraries, Coss UI follows the shadcn/ui copy-paste philosophy - no npm install, just source code.

#Features ⚡️

• Layered Architecture: Primitives → Particles → Atoms for flexible abstraction.

• Base UI Foundation: Robust accessibility, focus management, and keyboard navigation.

• Tailwind-Powered Styling: Beautiful, responsive design with full customization.

• Copy-Paste Workflow: No dependencies—just copy code into your project.

• AI-Optimized Code: Clean, predictable structure for LLMs to read and modify.

• COSS Sustainability: Open-source with tools, docs, and community support.

#Pros ✅

• Full Ownership: Copy-paste means you control every line of code.

• Accessibility-First: Base UI handles ARIA, focus, and keyboard out of the box.

• AI-Ready: Structured for language models to generate, refactor, or extend.

• Modern Stack: Base UI + Tailwind + TypeScript = future-proof.

• Sustainable Open Source: Backed by Cal.com’s COSS model.

• shadcn/ui Familiarity: Same workflow, different foundation.

#Cons ⚠️

• React Only: Limited to React ecosystem.

• Learning Curve: Requires understanding Base UI and layered model.

• No npm Install: Manual copy-paste may slow initial setup.

• Early Stage: Still evolving, with fewer components than mature libraries.

#Included Components - Templates

Coss UI offers a growing collection across three layers:

• Primitives: Button, Input, Dialog, Select (Base UI core)

• Particles: Auth Form, Data Table, Date Picker, Navigation Menu

• Atoms: Booking Flow, User Profile Sync, Payment Integration

#Pricing 💸

Coss UI operates on a Free model:

• Free Access: All components, docs, and source code are open-source.

• No Pro Version: No paid tiers—sustainability via COSS model.

#Integrations 🧰

Coss UI integrates with:

• React: Core framework for component composition.

• Base UI: Unstyled, accessible primitives.

• Tailwind CSS: Utility-first styling for design.

• TypeScript: Full type safety and IDE support.

• Calcom: Official UI for scheduling and bookings.