Primitives
Headless, unstyled components that provide behavior, accessibility, and state management. Style them however you want with complete control.
What are Primitives?
Primitives are headless components that handle all the complex behavior, keyboard navigation, accessibility, and state management while providing zero styling. They give you complete control to build exactly what you need.
Fully Accessible
WCAG 2.1 AA compliant with full keyboard navigation and screen reader support
Completely Unstyled
No CSS, no opinions. Apply your own design system and styling
Composable
Build complex components by composing simple primitives together
Available Primitives
Click on any primitive to view demos, API documentation, and code examples.
Inputs & Forms
Data Display
Navigation
Overlays
Dialog
Headless modal dialog with focus trap and ARIA
Dropdown Menu
Unstyled floating menu with keyboard navigation
Hover Card
Unstyled hover card with delay and pointer events
Popover
Unstyled floating panel with positioning
Sheet
Unstyled side panel with animation support
Tooltip
Unstyled tooltip with delay and positioning
Why Use Primitives?
Perfect For:
- ✓ Building custom design systems from scratch
- ✓ Implementing unique brand-specific designs
- ✓ Using your own CSS framework or methodology
- ✓ Maximum flexibility and control over appearance
Need Styled Components?
If you want pre-styled components with beautiful defaults based on shadcn/ui design, check out our styled components. They're built on top of these same primitives.
View Styled Components →