Web Components
JavaScript-enhanced components with progressive enhancement. Most components work without JavaScript and are enhanced when JS is available.
Web components are VB's enhancement layer. Every component wraps a native HTML fallback — an <accordion-wc> contains <details> elements, a <tabs-wc> starts as a list of links, a <combo-box> wraps a regular <input> and <datalist>. Before JavaScript loads, the page still works.
VB web components use the light DOM exclusively — no Shadow DOM, no framework dependencies, no bundler required. Styles come from VB's CSS, and the components enhance semantic markup that is already in your HTML. This keeps the DOM inspectable, styleable, and accessible by default.
Components that participate in forms use the Form-Associated Custom Elements API to integrate with native form submission, validation, and reset — no hidden inputs required.
Interactive Components
Components for user interaction and content organization.
<accordion-wc>
Collapsible content sections
<carousel-wc>
Scroll carousel with controls and autoplay
<combo-box>
Autocomplete combobox with single-select and multi-select tag modes
<command-palette>
Cmd+K command palette with search and actions
<compare-surface>
Before/after image comparison slider with drag handle and keyboard support
<content-swap>
Two-face content toggle with flip, fade, slide, and scale transitions
<context-menu>
Right-click context menu with keyboard navigation
<drop-down>
Dropdown menu with keyboard navigation
<emoji-picker>
Emoji picker with search, categories, and insertion
<include-file>
Load remote HTML fragments with progressive enhancement
<qr-code>
QR code generator with progressive enhancement
<star-rating>
Star rating widget with CSS-only selection and form association
<short-cuts>
Keyboard shortcuts help overlay
<slide-accept>
Slide-to-confirm interaction with drag handle and spring-back
<tabs-wc>
Tabbed interface component
<toast-wc>
Non-blocking notifications
<tool-tip>
Contextual tooltips
<foot-notes>
Inline footnotes with popup
<geo-map>
Static map tiles with marker and address caption
<heading-links>
Auto-generate heading anchors
<icon-wc>
Icon component with Lucide icons
<page-toc>
Table of contents generator
<site-search>
Search dialog component
<settings-panel>
Compact settings panel with gear trigger and details accordion
<split-surface>
Resizable panel splitter with drag divider
<data-table>
Enhanced data tables
<theme-picker>
Theme picker component
Related
All Elements
Complete element index
Custom Elements
CSS-only layout primitives
Native Elements
Standard HTML5 elements
Form Association
ElementInternals API guide