Component Guides
These concise guides follow src/lib/showcase/registry.ts order. Start with the local pattern, then use the secondary upstream reference only when you need exhaustive API detail.
Open the live component catalog →
Disclosure & Layout
- Accordion — Organizes content into collapsible sections. Live demo
- Collapsible — Expands and collapses a single content region. Live demo
- Tabs — Switches between mutually exclusive panels. Live demo
- Aspect Ratio — Constrains content to a fixed width-to-height ratio. Live demo
- Scroll Area — Custom scrollbars that behave like native ones. Live demo
- Separator — Semantic divider between content groups. Live demo
- Toolbar — Groups controls behind one roving tab stop. Live demo
Overlays
- Dialog — Modal window layered over the page. Live demo
- Alert Dialog — Interruptive dialog that demands a decision. Live demo
- Popover — Floating panel anchored to a trigger. Live demo
- Tooltip — Hover and focus hint for a control. Live demo
- Link Preview — Rich hover card preview for a link. Live demo
Menus & Navigation
- Dropdown Menu — Menu opened from a button trigger. Live demo
- Context Menu — Menu opened by right click or long press. Live demo
- Menubar — Desktop-style horizontal menu bar. Live demo
- Navigation Menu — Site navigation with rich flyout panels. Live demo
- Command — Filterable command palette. Live demo
- Pagination — Page-by-page navigation for long lists. Live demo
Form Controls
- Button — Button that renders as a link when given an href. Live demo
- Checkbox — Binary and indeterminate checkbox with a hidden input. Live demo
- Switch — On/off toggle for instantly applied settings. Live demo
- Radio Group — Single choice from a roving-focus set. Live demo
- Label — Accessible label wired to any control. Live demo
- Toggle — Two-state pressed button. Live demo
- Toggle Group — Single or multiple selection across toggles. Live demo
Selection & Input
- Select — Listbox-backed select with typeahead. Live demo
- Combobox — Input-filtered select with single or multiple values. Live demo
- Slider — Single or multi-thumb value range. Live demo
- PIN Input — One-time-code entry with paste support. Live demo
- Rating Group — Star rating with half-step support. Live demo
Dates & Time
- Calendar — Standalone date calendar with multi-month support. Live demo
- Range Calendar — Calendar that selects a start and end date. Live demo
- Date Field — Segmented date entry field. Live demo
- Date Picker — Date field plus popover calendar. Live demo
- Date Range Field — Two linked segmented date fields. Live demo
- Date Range Picker — Range field plus popover range calendar. Live demo
- Time Field — Segmented time entry field. Live demo
- Time Range Field — Start and end time in one control. Live demo
Feedback
- Avatar — Image with loading and fallback states. Live demo
- Progress — Determinate and indeterminate task progress. Live demo
- Meter — Static measurement inside a known range. Live demo
Utilities
- Portal — Renders children into another part of the DOM. Live demo
- mergeProps — Merges event handlers, classes and styles safely. Live demo
- useId — SSR-stable unique id generator. Live demo
- IsUsingKeyboard — Global reactive keyboard-modality flag. Live demo
- BitsConfig — Scoped defaults for nested Bits UI components. Live demo