coss ui is a collection of beautifully designed, accessible, and composable components for your React applications. Built on top of Base UI and styled with Tailwind CSS, this library emphasizes ownership of your code by providing source files rather than opaque packages. It follows the copy-paste development philosophy, allowing developers to have full control over the visual and functional aspects of their components. This approach ensures endless customization and facilitates learning by allowing users to see exactly how each component is constructed. coss ui is engineered for both human developers and artificial intelligence, featuring clear and predictable code patterns that are easy to reason about and modify. It is the component library progressively adopted by the team at Cal.com, ensuring it meets the demands of high-traffic, production-ready applications. The library is built to be sustainable, maintaining transparency and open-source accessibility as part of the commercial open source software (COSS) movement. The library structure is divided into three layers: Primitives, which are the fundamental building blocks powered by Base UI that handle accessibility and keyboard navigation; Particles, which are pre-assembled components like authentication forms, tables, and date pickers; and Atoms, which are API-enhanced particles that integrate with external data services for smarter, ready-to-use functionality. Migration paths are provided for those transitioning from libraries like shadcn/ui or Radix UI.

Some of the key features are:

• Base UI Integration: Built on top of unstyled, robust, and accessible primitives from Base UI for reliable core functionality.
• Copy-Paste Philosophy: Provides full access to component source code, removing rigid abstractions and simplifying customization.
• Tailwind CSS Styling: Leverages Tailwind for flexible, consistent, and easily editable visual design.
• Production-Tested: Developed with real-world requirements from high-scale platforms like Cal.com.
• AI-Friendly Codebase: Architecture is intentionally clear and readable to assist AI models in understanding and modification.
• Layered Architecture: Offers a progression from foundational primitives to complex, API-ready atomic components.
• Comprehensive Component Suite: Includes a vast library of UI elements such as accordions, alerts, autocompletes, avatars, and complex form fields.

Usage involves adding the necessary files directly to your project using the provided CLI tools or manual installation methods. Because components are provided as source files, users can modify them directly within their own codebase to meet specific design requirements. The library supports standard React patterns, and because it is based on Base UI, it remains compatible with familiar accessibility standards and state management patterns.

Some common use cases include:

• Custom Design Systems: Building unique internal administrative dashboards or external SaaS interfaces that require a high degree of visual customization.
• Accessible Web Forms: Creating complex forms with built-in validation, error handling, and keyboard navigation for authentication or user profile management.
• Data-Rich Interfaces: Developing interactive tables, data grids, or information dashboards that require seamless integration with external APIs.
• Rapid UI Prototyping: Quickly scaffolding complex web application shells by utilizing pre-assembled particles instead of building from scratch.