The full catalogue of BareDOM components — 103 UI web components across 11 categories. Every UI 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).