The full catalogue of BareDOM components — 103 web components across 11 categories. Every component is a native Custom Element with auto-generated TypeScript declarations and is exposed in all five framework adapters.
Tag names are case-insensitive in HTML but always lowercase-kebab-case in the source. Component documentation links to deeper guides with API tables, examples, and a11y notes.
| Tag | Description |
|---|
<x-button> | Action control. Variants: primary, secondary, tertiary, ghost, danger. Sizes: sm, md, lg. States: disabled, loading, pressed. Icon slots. |
<x-checkbox> | Boolean input. Reflects checked and indeterminate states to attributes. |
<x-color-picker> | Colour picker with 2D saturation/brightness area, hue strip, optional alpha, preset swatches, eyedropper, and clipboard copy. Inline or popover mode. |
<x-combobox> | Single-select combobox with type-ahead filtering. Value must match one of the provided <option> children. |
<x-copy> | Copy-to-clipboard utility button with success feedback. |
<x-currency-field> | Formatted currency input with locale-aware masking. |
<x-date-picker> | Calendar-based date selection with keyboard navigation. |
<x-fieldset> | Groups related form controls with a styled legend. |
<x-file-download> | Download trigger that initiates a file transfer. |
<x-file-upload> | Drag-and-drop upload zone with click-to-browse, file list with thumbnails, validation, and form integration. |
<x-form> | Form wrapper with coordinated validation state. |
<x-form-field> | Label + input wrapper with error and hint text slots. |
<x-multi-combobox> | Multi-select combobox with type-ahead filtering. Selected items display as removable chips. |
<x-otp-input> | One-time-password input with single-character slots, auto-advance, paste distribution, and full keyboard nav. |
<x-radio> | Single-choice input within a radio group. |
<x-range-slider> | Dual-handle accessible range slider with form association. Min/max, step, and label support. |
<x-rating> | Discrete star-rating with form association and full keyboard support. |
<x-search-field> | Search input with integrated clear button and search icon. |
<x-select> | Dropdown select control with custom styling. |
<x-slider> | Range slider with step, min/max, and value display. |
<x-stepper> | Multi-step form progress indicator with navigation. |
<x-switch> | Toggle switch for boolean settings. |
<x-text-area> | Multi-line text input with auto-resize option. |
| Tag | Description |
|---|
<x-alert> | Semantic alert banner. Types: info, success, warning, error. Auto-dismiss with timeout-ms. Fires x-alert-dismiss. |
<x-badge> | Small inline label for counts, states, and categories. |
<x-chip> | Compact tag component, optionally removable. |
<x-notification-center> | Notification hub for aggregating and managing in-app notifications. |
<x-progress> | Linear progress bar with determinate and indeterminate modes. |
<x-progress-circle> | Circular progress indicator for compact spaces. |
<x-skeleton> | Animated loading placeholder that mirrors content shape. |
<x-skeleton-group> | Container that synchronizes child <x-skeleton> animation timing and offers declarative layout presets. |
<x-spinner> | Inline loading spinner with size and colour variants. |
<x-toast> | Single transient notification with enter/exit animations and auto-dismiss. |
<x-toaster> | Toast manager. Positions a queue of <x-toast> elements, enforces max-toasts, and fires x-toaster-dismiss. |
| Tag | Description |
|---|
<x-breadcrumbs> | Hierarchical path trail with separator customisation. |
<x-menu> | Vertical menu container coordinating <x-menu-item> children. |
<x-menu-item> | Individual menu entry with icon, label, description, and keyboard support. |
<x-navbar> | Top navigation bar with responsive slot layout. |
<x-pagination> | Page navigation controls with first/previous/next/last and page-size selection. |
<x-sidebar> | Collapsible side navigation panel with collapse/expand animation. |
<x-tab> | Individual tab within an <x-tabs> container. |
<x-tabs> | Tab container that coordinates <x-tab> children, manages active state, and fires change events. |
| Tag | Description |
|---|
<x-bento-grid> | CSS Grid container for asymmetric "bento box" layouts with dense auto-placement. Pair with <x-bento-item>. |
<x-bento-item> | Structural wrapper that controls column and row spanning inside an <x-bento-grid>. |
<x-card> | Surface container. Variants: elevated, outlined, filled, ghost. Interactive mode available. |
<x-collapse> | Expandable/collapsible section with animated height transition. |
<x-container> | Responsive max-width container with configurable padding. |
<x-divider> | Horizontal or vertical visual separator. |
<x-grid> | CSS Grid layout component with responsive column configuration. |
<x-proximity-list> | Horizontal or vertical list whose items scale up as the pointer approaches — dock effect on any list. |
<x-spacer> | Flexible spacing element for flexbox and grid layouts. |
<x-split-pane> | Resizable two-panel layout with draggable divider, horizontal or vertical. |
| Tag | Description |
|---|
<x-avatar> | User photo or initials display. Shape, size, and status dot variants. |
<x-avatar-group> | Overlapping avatar stack for representing multiple users. |
<x-calendar> | Inline month calendar — always-visible companion to date pickers, with keyboard navigation. |
<x-carousel> | Accessible carousel with swipe/drag, arrows, dot indicators, autoplay, slide/fade transitions, and horizontal/vertical orientation. |
<x-chart> | Data visualisation component for common chart types. |
<x-stat> | KPI / metric card with value, label, trend, and icon slots. |
<x-table> | Data grid using CSS subgrid. Supports sorting, single/multi-select, striping, and accessible captions. |
<x-table-cell> | Table cell for header and data modes, with sort indicator and alignment control. |
<x-table-row> | Table row with interactive selection and x-table-row-select event. |
<x-timeline> | Vertical timeline container that coordinates <x-timeline-item> children. |
<x-timeline-item> | Individual timeline event with time, icon, heading, and body slots. |
| Tag | Description |
|---|
<x-cancel-dialogue> | Confirmation modal for destructive cancel actions. |
<x-command-palette> | Keyboard-accessible global search and command interface. |
<x-context-menu> | Right-click / long-press contextual action menu. |
<x-drawer> | Off-canvas sliding panel, configurable from any edge. |
<x-dropdown> | Positioned dropdown container for menus and selection. |
<x-modal> | Centred dialog with backdrop, focus trap, and Escape to close. |
<x-popover> | Anchored popover for tooltips, help text, and contextual UI. |
<x-tooltip> | Lightweight non-interactive overlay showing supplementary text on hover or focus of a trigger element. |
<x-welcome-tour> | Guided product tour with spotlight backdrop, popover steps, and configurable connectors between steps. |
| Tag | Description |
|---|
<x-code> | Code-display element that reads source code from its own light DOM and applies syntax styling. |
<x-icon> | Themeable wrapper around a slotted <svg>. Handles sizing, theme-aware colour, and accessibility. |
<x-image> | Themeable image with aspect ratio, skeleton shimmer while loading, fade-in on load, and fallback slot. |
<x-kbd> | Inline element for keyboard keys and shortcuts. Renders styled <kbd> caps from a combo string. |
<x-spotlight-card> | Card surface with a soft radial glow that follows the cursor while over the card. Decorative only. |
<x-typography> | Themeable text wrapper. Variants: headings, body, captions, code, keyboard, blockquotes, and more. |
| Tag | Description |
|---|
<x-kinetic-canvas> | Animated canvas background with slotted content. Renders particle/character animations behind any content. |
<x-kinetic-font> | Variable-font axis interpolation driven by spring physics, reacting to cursor proximity or scroll velocity. |
<x-kinetic-typography> | Text along SVG paths with motion effects — scrolling, bouncing, oscillating movement, combinable. |
<x-morph-stack> | Continuous transformation between UI states — layout, shape, material, and content evolve as one surface. |
<x-soft-body> | Card whose border is an SVG path driven by spring physics — control points displace and spring back. |
<x-splash> | Full-viewport splash screen for app initialization. Dismisses with a fade-out when active is removed. |
| Tag | Description |
|---|
<x-confetti> | Celebration effect that emits a burst of particles on demand. Triggered imperatively; configuration via attributes. |
<x-gaussian-blur> | Decorative background with animated blurred colour blobs, producing a soft, dreamy gradient effect. |
<x-liquid-dock> | Viscous floating navigation dock with SVG goo filter. Liquid surface bulges toward your cursor. |
<x-liquid-fill> | Scroll progress indicator that fills with animated liquid. Wave motion reacts to scroll speed. |
<x-liquid-glass> | Content container shaped as a shifting translucent blob, merged via SVG goo filter into organic boundaries. |
<x-metaball-cursor> | Organic blobs that follow the cursor with latency. Overlapping blobs stretch and fuse like mercury drops. |
<x-neural-glow> | WebGL bioluminescent neural network background — softly glowing orbs connected by pulsing lines. |
<x-organic-divider> | Curved organic section divider with layered SVG shapes, animations, and full theming. |
<x-organic-progress> | Progress indicator that grows a vine or honeycomb lattice structure with simplex-noise organic motion. |
<x-organic-shape> | Organic blob-shaped container. Decorative accent or content wrapper with fluid natural boundaries. |
<x-particle-button> | Button whose surface emits and reabsorbs visual fragments on interaction. Energetic and materially alive. |
<x-ripple-effect> | Container that applies a water-like SVG distortion ripple to its content on mouse click. |
| Tag | Description |
|---|
<x-scroll> | Flexible scroll container with horizontal/vertical carousel scrolling, snap, auto-play, loop, dots, and keys. |
<x-scroll-parallax> | Parallax container where children move at different speeds relative to scroll via data-speed. |
<x-scroll-stack> | Scroll-driven card stacking. Cards animate upward and stack on top of each other like a deck. |
<x-scroll-story> | Scrollytelling: a sticky media panel stays pinned while text "steps" scroll past and trigger state changes. |
<x-scroll-timeline> | Scroll-driven timeline along a vertical track with animated markers and progress fill. |
| Tag | Description |
|---|
<x-i18n> | Inline translation element. Renders translated text for a key, resolved from the nearest <x-i18n-provider>. |
<x-i18n-provider> | Internationalization provider. Fetches translation JSON and supplies locale context to descendant <x-i18n>. |
See also: <x-theme> (theming provider, README section) and <x-trace-history> (time-travel debugger, README section).