Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Attachment
- Avatar
- Badge
- Breadcrumb
- Bubble
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Desktop Window
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Frame
- Heading
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Live Waveform
- Marker
- Menubar
- Message
- Message Scroller
- Meter
- Meter Ring
- Native Select
- Navigation Menu
- NumberCount
- Pagination
- Popover
- Progress
- Progress Ring
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Timeline
- Toast
- Toggle
- Toggle Group
- Tooltip
Compositions
Utilities
Introduction
A component registry built on Base UI and Tailwind CSS.
ondo-ui is a set of beautifully designed components distributed as a shadcn-compatible registry. Components are built on top of Base UI primitives and styled with Tailwind CSS.
This is not a component library you install from npm. Instead, you pick the components you need and copy them into your project with the shadcn CLI — the code is yours to change.
Principles#
- Open code — every component lands in your codebase as plain TypeScript you can edit.
- Accessible by default — built on Base UI primitives with keyboard and screen-reader support.
- Composable — components share a common API so they compose predictably.
- Themeable — styled entirely with CSS variables in the oklch color space.
Get started#
Head to Installation to register the @ondo-ui registry in your project, then browse the components.