8.4k

Introduction

A new, modern UI component library built on top of Base UI. Built for developers and AI.

coss.com ui is a collection of beautifully designed, accessible, and composable components for your React apps. Built on top of Base UI and styled with Tailwind CSS, it's designed for you to copy, paste, and own.

We think Base UI is the best foundation for modern web applications. We've taken its powerful, unstyled primitives and given them a design system that's ready to go, right out of the box.

This is the component library we'll be progressively adopting for cal.com. We're building it in the open for anyone who wants to create beautiful, reliable user interfaces.

How It Works

Our approach is simple: you should own your code. We're inspired by the copy-paste ethos of shadcn/ui.

Instead of installing a package, you get the source code. This means:

  • No abstractions: You have full control over how components look and behave.
  • Endless customization: Need to change something? Just edit the file.
  • Learn by doing: See how components are built and adapt them to your needs.

Like shadcn/ui, but with Base UI

If you've used shadcn/ui, you'll feel right at home. The main difference is the foundation: shadcn/ui uses Radix UI, while coss.com ui uses Base UI.

We chose Base UI for its robust, accessible, and unopinionated primitives. It handles the hard parts—like accessibility, keyboard navigation, and focus management—without imposing any styles. This gives us the freedom to create a design system that is both beautiful and flexible, and it gives you a solid foundation to build upon.

If you're considering a move from a Radix-based library, we provide a clear migration path. Each of our components comes with detailed Comparing with Radix / shadcn to make the transition as smooth as possible.

Primitives, Particles and Atoms

At the core of coss.com ui are the UI primitives—unstyled, accessible building blocks powered by Base UI. These are the foundation: low-level components that handle accessibility, focus management, and keyboard interactions, without dictating design.

On top of these primitives, we introduce particles. Particles are pre-assembled components—like authentication forms, tables, or date pickers—that combine multiple primitives into ready-to-use solutions. They’re a bit more opinionated in design, but still easy to customize, extend, or break apart when needed.

Finally, we go a step further with atoms. Atoms are API-enhanced Particles: components that don’t just manage UI state locally, but also integrate with external data and services. Think of them as smart components that connect UI to APIs, providing out-of-the-box behaviors for common patterns (authentication flows, scheduling, etc.).

Together, primitives, particles, and atoms give you a full spectrum:

  • Primitives → the foundation
  • Particles → the patterns
  • Atoms → the integrations

This layered approach lets you choose the right level of abstraction for your project—whether you need a barebone primitive, a polished UI pattern, or a complete API-ready solution.

Built for Humans and AI

We're building an infrastructure for both humans and AI. Our components are written to be clear, readable, and predictable, so that language models can understand, reason about, and modify them.

Open Source, Made Sustainable

This project is open source, and not just in name—it’s part of the COSS (Commercial Open Source Software) philosophy. We build in public, maintain transparency, and believe that open source works best when it's sustainable.

As part of coss.com’s mission, we support open source projects so they can grow, maintain long-term viability, and provide value not just for users, but contributors. We offer tools, docs, infrastructure, and community so your work doesn’t just survive—it thrives.

We’re excited to see what you build with it, and always welcome contributions, feedback, or improvements.

Get Involved

We're always looking for contributors. Whether it's a bug report, a new feature, or a documentation update, we appreciate your help.

To get started, check out our contribution guidelines on GitHub. You can find open issues and submit pull requests in our repository.

coss.com ui

Built by and for the team of Cal.com, Inc. — the leading commercial open source company (“coss”).