Component Overview
Voidable ships 73 components organized by category. All components render in the Light DOM and are styled entirely through @voidable/theme CSS tokens.
Layout
Section titled “Layout”| Component | Tag | Description |
|-----------|-----|-------------|
| Card | <void-card> | Content container for dashboard widgets, product listings, and media previews |
| Panel | <void-panel> | Bordered or elevated region for grouping related settings and detail blocks |
| Divider | <void-divider> | Visual separator between sections in forms, sidebars, and layouts; supports labels |
| ScrollArea | <void-scroll-area> | Fixed-height scrollable container with styled scrollbars for long content and lists |
| NavBar | <void-nav-bar> | Top navigation bar for branding, primary links, and user account controls |
| Sidebar | <void-sidebar> | Collapsible side navigation for app shells, admin panels, and doc sites |
| Carousel | <void-carousel> / <void-carousel-slide> | Scrollable content gallery for product photo viewers, onboarding flows, and featured content sliders |
| Collapsible | <void-collapsible> | Simple expand/collapse panel for FAQ sections, spoiler text, and progressive disclosure of secondary content |
Data Display
Section titled “Data Display”| Component | Tag | Description |
|-----------|-----|-------------|
| Avatar | <void-avatar> | User identity display for comment threads and user lists; falls back to initials |
| Badge | <void-badge> | Small status chip for issue trackers, tag systems, and state indicators |
| List / ListItem | <void-list> | Structured item list for menus, option sets, and content feeds with optional dividers |
| Table | <void-table> | Styled data table for admin lists, report grids, and comparison layouts |
| Tag | <void-tag> | Removable label chip for selected filters, applied tags, and multi-value inputs |
| Breadcrumbs | <void-breadcrumbs> | Navigation trail for deep hierarchies in dashboards and file browsers |
| StatusDot | <void-status-dot> | Presence indicator showing online/away/offline state in user lists and rosters |
| Tooltip | <void-tooltip> | Hover hint for icon buttons and truncated text without cluttering the UI |
| Popover | <void-popover> | Click-triggered anchored overlay for contextual detail and mini-forms |
| Tabs / TabPanel | <void-tabs> | Tabbed navigation for settings pages and parallel content categories |
| Accordion | <void-accordion> / <void-accordion-item> | Collapsible sections for FAQs, settings panels, and long-form selective content |
| Stepper | <void-stepper> | Multi-step progress tracker for onboarding flows and checkout funnels |
| Pagination | <void-pagination> | Page navigation for data tables, search results, and content archives |
| Indicator | <void-indicator> | Badge overlay for notification counts and unread/presence signals on icons |
| Stat | <void-stat> | Key metric display for analytics dashboards with label, value, delta, and trend |
| Calendar / DatePicker | <void-calendar> / <void-date-picker> | Date selection for booking flows and scheduling UIs with locale-aware formatting and min/max constraints |
| HoverCard | <void-hover-card> | Rich content preview card that appears on hover for user profiles, link previews, and contextual information panels |
| NavMenu / NavMenuItem | <void-nav-menu> | Horizontal navigation bar with dropdown sub-menus for site headers, application nav bars, and mega-menu layouts |
| Component | Tag | Description |
|-----------|-----|-------------|
| Button | <void-button> | Action trigger for forms, dialogs, and toolbars with variants and loading state |
| Input | <void-input> | Single-line text entry for login forms, search fields, and structured data capture |
| Textarea | <void-textarea> | Multi-line text entry for comment fields, descriptions, and freeform text |
| Select | <void-select> | Native dropdown for small option sets where a simple pick-one is sufficient |
| Multiselect | <void-multiselect> / <void-option> | Multi-value picker for tag selection and filter fields; shows chips for selected items |
| Combobox | <void-combobox> / <void-option> | Filterable dropdown for long option lists like country selectors and user pickers |
| Checkbox | <void-checkbox> | Binary or indeterminate selection for form fields and data table row selection |
| CheckboxGroup | <void-checkbox-group> | Grouped multi-option selection for preference forms and filter panels |
| Radio / RadioGroup | <void-radio> | Mutually exclusive option selection for plan pickers and preference settings |
| Switch | <void-switch> | On/off toggle for feature flags and settings that take immediate effect |
| Slider | <void-slider> | Continuous value selection for volume controls, price ranges, and numeric settings |
| Field | <void-field> | Form field wrapper pairing an input with label, helper text, and validation error |
| FileUpload | <void-file-upload> | Drag-and-drop file picker for document uploads and import wizards |
| ComposeInput | <void-compose-input> | Rich text entry area for messaging UIs, comment boxes, and post composers |
| Toggle | <void-toggle> | Pressable toggle button for toolbar actions and editor formatting controls |
| ToggleGroup | <void-toggle-group> | Multi-button toggle set for text editor toolbars and filter chips where one or many options can be active |
| SegmentedControl | <void-segmented-control> / <void-segmented-control-item> | Mutually exclusive button group for view mode toggles and compact tab-like navigation |
| NumberInput | <void-number-input> | Precise numeric entry for quantity selectors, price fields, and settings with increment/decrement controls |
| Editable | <void-editable> | Inline editable text for renaming items, editing headings, and click-to-edit table cells |
| PinInput | <void-pin-input> | Single-character input cells for OTP verification codes, PIN entry, and multi-digit confirmation fields |
| TagsInput | <void-tags-input> | Multi-tag input field for email recipients, category labels, keyword tagging, and comma-separated value entry |
| ColorPicker | <void-color-picker> | Color selection control with spectrum area, hue slider, hex input, and preset swatches for theme customization and design tools |
| ActionInput | <void-action-input> | Input field with an attached icon button for copy-to-clipboard inputs, search boxes, and similar input-plus-action patterns |
Feedback
Section titled “Feedback”| Component | Tag | Description |
|-----------|-----|-------------|
| Alert | <void-alert> | Inline contextual message for form validation, permission warnings, and status notices |
| Banner | <void-banner> | Full-width site-level announcement for maintenance windows and promotional messaging |
| Toast / ToastContainer | <void-toast> | Temporary notification popup for action confirmations and status feedback |
| Progress | <void-progress> | Determinate or indeterminate progress bar for uploads and multi-step processes |
| Spinner | <void-spinner> | Indeterminate loading indicator for async operations and inline fetching |
| Skeleton | <void-skeleton> | Content placeholder during loading for cards and lists to prevent layout shift |
| ErrorFallback | <void-error-fallback> | Error state display for failed fetches and runtime errors with optional retry |
| Dialog | <void-dialog> | Modal overlay for confirmations and multi-step forms requiring user attention |
| Drawer | <void-drawer> | Slide-out overlay panel for filters, detail views, and navigation menus |
Navigation
Section titled “Navigation”| Component | Tag | Description |
|-----------|-----|-------------|
| Hamburger | <void-hamburger> | Animated open/close toggle for mobile nav menus and collapsible sidebars |
| DropdownMenu | <void-dropdown-menu> / <void-dropdown-menu-item> | Trigger-anchored action menu for table row actions and toolbar overflow menus |
| Menu / MenuItem / MenuGroup | <void-menu> / <void-menu-item> / <void-menu-group> | Always-visible menu panel for command palettes, side panels, and searchable action lists |