A new, modern UI component library built on top of Base UI. Built for developers and AI.
coss 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.
Early Access
coss ui is currently in early development. We're building this library in the open and actively working on new components and features.
How It Works
Our approach is simple: you should own your code. We're inspired by the copy-paste ethos of shadcn/ui.
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.
Built on Base UI, Designed for Production
coss ui is built on Base UI from the ground up — not as an adaptation or port from Radix UI.
Primitives, Particles and Atoms
At the core are the UI primitives — unstyled, accessible building blocks.
Built for Humans and AI
Our components are written to be clear, readable, and predictable, so that language models can understand, reason about, and modify them effortlessly.
Open Source, Made Sustainable
This project is open source and part of the COSS (Commercial Open Source Software) philosophy.
Accordion
Collapsible panels with headings and content.
A modern UI component library built on top of Base UI — copy, paste, own.
Yes, all components follow WAI-ARIA patterns and support keyboard navigation.
No package install. Copy the source directly into your project.
Alert
A callout for displaying important information.
ℹYour session expires in 10 minutes.
✓Profile updated successfully.
⚠Unsaved changes detected.
✕Failed to save. Please retry.
Alert Dialog
Requires user response to proceed.
⚠️
Are you sure?
This action is permanent and cannot be undone.
Autocomplete
Suggests options as you type.
Avatar
Image element with a fallback for representing the user.
JD
AB
MR
KL
ZX
+3
JD
AB
MR
KL
sizes
Badge
A button or component that looks like a badge.
Default✦ NewBetaSuccessErrorWarning
Breadcrumb
Shows the path to the current page.
Button
Triggers an action or event.
Calendar
A date grid for selecting days.
May 2026
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Card
Container for grouped related content.
Account Summary
Monthly overview for May 2026
Your account is in good standing. Usage this month is 42% of your plan limit.
Checkbox
A control to toggle boolean options.
✓
Accept terms and conditions
✓
Subscribe to newsletter
✓
Enable notifications
Collapsible
An expandable section with a trigger.
📄 README.md📄 package.json📁 src/📁 public/
Command
A fast keyboard-driven command palette.
Quick actions
⚙
Settings
⌘,
📄
New Document
⌘N
🔍
Find in files
⌘⇧F
🎨
Change theme
⌘⇧T
🚀
Deploy
⌘⇧D
📋
Copy link
⌘L
Date Picker
An input with a calendar popup.
May 2026
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Dialog
A modal overlay for focused tasks.
Drawer
A panel that slides in from the edge.
Empty State
Shown when no content is available.
◎
No results found
Try adjusting your search or filters to find what you're looking for.
Field
A labeled input with hint and error states.
We'll never share your email.
Username is already taken.
Form
A sign-in form with validation.
Input
A text input with multiple states.
https://
Kbd
Keyboard key combination display.
⌘K
CtrlShiftP
AltF4
Esc
Label
Accessible label for form elements.
Menu
A dropdown menu triggered by a button.
✏️ Edit
📋 Duplicate
🔗 Share link
🗑 Delete
Meter
A visual indicator of a scalar value.
Storage68%
Memory42%
CPU81%
Bandwidth24%
Number Field
A numeric input with stepper controls.
OTP
A one-time password input with 6 slots.
—
Pagination
Navigate between pages of content.
…
Popover
A floating panel anchored to a trigger.
Dimensions
Width: 400px · Height: 240px
Progress
Displays progress of a task.
Uploading…72%
Processing45%
Radio Group
Single-select option within a group.
Free — $0/month
Pro — $12/month
Team — $29/month
Scroll Area
A scrollable container with custom scrollbar.
Introduction
Getting Started
Components
Theming
Accessibility
Animations
Dark Mode
Contributing
Changelog
Roadmap
Select
A native dropdown selection input.
▼
▼
Separator
A visual divider between content.
Section A
OR
LeftRight
Skeleton
Placeholder shown while content loads.
Slider
A range input with visual feedback.
Volume60
Brightness30
Spinner
An animated loading indicator.
sizes & colors
Switch
A toggle for boolean on/off state.
Dark mode
Notifications
Auto-save
Table
Structured data in rows and columns.
Name
Role
Status
Alice Chen
Engineer
Active
Bob Kumar
Designer
Away
Maria Lee
PM
Active
James Wu
QA
Offline
Tabs
Switch between related views.
Project overview and recent activity.
Charts and performance metrics here.
Preferences and configuration options.
Textarea
Multi-line text input with char count.
0 / 280
Toast
Brief auto-dismissing notifications.
Toggle
A single button with pressed/unpressed state.
Toggle Group
Mutually exclusive selection from a group.
Toolbar
A row of grouped action buttons.
Tooltip
A hint that appears on hover.
This is a tooltip
Underlined term
Appears above on hover
⌘S — Save changes
Preview Card
A card with image area, body, and metadata.
[ preview image ]
Getting started with coss/ui
A walkthrough of the component library — setup to production.