Components
A collection of foundational components designed to be headless, accessible, and highly customizable.
Primitives
Foundation components for building higher-level abstractions.
| Name | Description |
|---|---|
| AspectRatio | Fixed width-to-height ratio container via CSS aspect-ratio |
| Atom | Polymorphic element with dynamic as prop and renderless mode |
| Portal | Teleport wrapper with automatic z-index stacking via useStack |
| Presence | Renderless mount lifecycle with lazy mounting and exit animation delay |
Providers
Pure context providers for state management. Always renderless—they provide logic without rendering DOM elements.
| Name | Description |
|---|---|
| Selection | Multi-selection state with v-model binding |
| Single | Single-selection with automatic deselection |
| Group | Multi-selection with tri-state support |
| Step | Sequential navigation (first, last, next, prev) |
| Locale | Locale context provider for internationalization |
| Scrim | Overlay backdrop with click-to-dismiss and z-index management |
| Theme | Theme context provider with CSS variable injection |
Actions
Interactive controls for user-initiated actions.
| Name | Description |
|---|---|
| Button | Button with loading grace period, toggle groups, and icon accessibility |
| Toggle | Pressable on/off button with standalone and group modes |
Forms
Form control components with accessibility and validation support.
| Name | Description |
|---|---|
| Checkbox | Checkbox controls with dual-mode (standalone/group) and tri-state support |
| Combobox | Filterable selection with autocomplete, virtual focus, and custom input |
| Form | Form validation coordinator with submit handling and error aggregation |
| Input | Text input with label, description, error messages, and character counting |
| NumberField | Numeric input with increment/decrement, formatting, and scrub |
| Radio | Radio group with single-selection and keyboard navigation |
| Select | Dropdown selection with virtual focus and multi-select support |
| Rating | Star/icon rating with hover preview, half-stars, and keyboard navigation |
| Slider | Range input with snapping, range mode, and custom tracks |
| Switch | Toggle switch with on/off states and label association |
Semantic
Components with meaningful HTML defaults. Render semantic elements by default but support the as prop for customization.
| Name | Description |
|---|---|
| Avatar | Image/fallback avatar with priority loading |
| Breadcrumbs | Navigation breadcrumbs with overflow detection and truncation |
| Carousel | Scroll-snap slide navigation with multi-slide display and drag/swipe |
| Image | Image with placeholder, error fallback, and lazy loading |
| Pagination | Page navigation with semantic <nav> wrapper |
| Progress | Headless progress bar with multi-segment and buffer support |
| Snackbar | Toast notification with queue, positioning, and auto-dismiss |
| Splitter | Resizable panel layout with drag handles |
Disclosure
Components for showing/hiding content.
| Name | Description |
|---|---|
| AlertDialog | Confirmation dialog with deferred close for async actions |
| Collapsible | Single-item disclosure toggle for showing and hiding content |
| Dialog | Modal dialog with focus management |
| ExpansionPanel | Accordion-style collapsible panels |
| Popover | CSS anchor-positioned popup content |
| Tabs | Tab panel navigation with keyboard support and lazy content rendering |
| Treeview | Hierarchical tree with nested selection and expand/collapse |
Was this page helpful?