Components Showcase

Supa Maven Skin bundles the complete Bootstrap 6 (6.0.0-alpha.1) component library and all 20 interactive JavaScript plugins, automatically isolating Bootstrap components from .prose typography rules and bridging Furo's adaptive Light/Dark color tokens.

Site authors can use standard Bootstrap 6 HTML markup inside Markdown (.md), declarative Markdown shorthands (> [!ALERT:theme], .supa-accordion, .supa-stepper), or Velocity helper macros (#bsAlert, #bsBadge, #bsCard in .md.vm pages). Every example below pairs the live interactive component with the exact syntax needed to render it.

The numbered sections cover buttons, badges, avatars, and chips, alerts and overlays, navigation, accordions, cards, and list groups, and forms.

[!IMPORTANT] Embedding HTML in Doxia 2.0 Markdown Pages When placing multi-line Bootstrap 6 HTML directly inside a .md file, keep each top-level <div>...</div> block free of internal blank lines so Doxia's CommonMark parser treats the block as uninterrupted HTML.

Interactive Component Playground

Inspired by the official Bootstrap 6 Button Playground, select a component, semantic .theme-*, surface variant, and size below to live-preview the rendered component and generate copy-ready Markdown + HTML syntax:

Component
Theme
Variant
Size 
<button type="button" class="btn btn-solid theme-primary btn-sm">Primary</button>

1. Actions & Buttons

Bootstrap 6 replaces legacy per-color button classes with composable .theme-* utilities (theme-primary, theme-accent, theme-secondary, theme-success, theme-info, theme-warning, theme-danger, theme-light, theme-dark) paired with surface variants (.btn-solid / .btn, .btn-outline, .btn-subtle, .btn-text, .btn-link), 3D depth (.btn-styled), icon buttons (.btn-icon), sizes (.btn-xs, .btn-sm, .btn-lg), and .btn-group toolbars.

Semantic Theme Variants (Solid, Outline, Subtle, Text & Styled 3D)

Solid Buttons (.btn .btn-solid .theme-*)
Outline Buttons (.btn .btn-outline .theme-*)
Subtle, Text, Link & Styled 3D Variants (.btn-subtle / .btn-text / .btn-link / .btn-styled)
Sizes, Button Groups & Toggle State (data-bs-toggle="button")
<!-- Solid, Outline, Subtle, Text, Link & 3D Styled Buttons -->
<button type="button" class="btn btn-solid theme-primary">Primary</button>
<button type="button" class="btn btn-outline theme-primary">Outline</button>
<button type="button" class="btn btn-subtle theme-success">Subtle</button>
<button type="button" class="btn btn-text theme-primary">Text</button>
<button type="button" class="btn btn-link theme-primary">Link</button>
<button type="button" class="btn btn-solid btn-styled theme-primary">Styled 3D</button>

<!-- Sizes, Toggle State & Button Group -->
<button type="button" class="btn btn-xs btn-solid theme-primary">Extra Small</button>
<button type="button" class="btn btn-sm btn-solid theme-primary">Small</button>
<button type="button" class="btn btn-lg btn-solid theme-primary">Large</button>
<button type="button" class="btn btn-outline theme-primary" data-bs-toggle="button" aria-pressed="false">Toggle Button</button>
<div class="btn-group" role="group" aria-label="Release channel group">
  <button type="button" class="btn btn-outline theme-secondary active">Stable</button>
  <button type="button" class="btn btn-outline theme-secondary">RC</button>
  <button type="button" class="btn btn-outline theme-secondary">Snapshot</button>
</div>

2. Badges, Avatars, Chips & Indicators

Bootstrap 6 introduces first-class Avatars (.avatar, .avatar-stack, .avatar-status), Chips (.chip, .chip-input with [data-bs-chips]), and composable Badges (.badge, .badge-subtle, .badge-outline), alongside Progress, Spinners, and Placeholders.

Badges (Solid, Subtle, Outline & Pill)

Primary Secondary Success Info Warning Danger
Subtle Primary Subtle Success Subtle Warning Subtle Danger Outline Primary Outline Info Large Pill Badge 
<!-- Solid, Subtle, Outline & Pill Badges -->
<span class="badge theme-primary">Primary</span>
<span class="badge theme-success">Success</span>
<span class="badge badge-subtle theme-primary">Subtle Primary</span>
<span class="badge badge-outline theme-info">Outline Info</span>
<span class="badge badge-lg rounded-pill theme-primary">Large Pill Badge</span>
#bsBadge("primary", "Primary")
#bsBadge("success", "Success")
#bsBadge("warning", "Warning")

Avatars, Sizes, Status Dots & Avatar Stacks

XS SM MC BS XL
MC RB DR +4 
<!-- Avatars with Status Indicators -->
<span class="avatar avatar-xs theme-primary">XS</span>
<span class="avatar theme-success">MC<span class="avatar-status status-online"></span></span>
<span class="avatar avatar-lg avatar-subtle theme-info">BS<span class="avatar-status status-busy"></span></span>

<!-- Overlapping Avatar Stack with Bootstrap 6 Tooltips -->
<div class="avatar-stack">
  <span class="avatar theme-primary" data-bs-toggle="tooltip" data-bs-title="Lead Maintainer">MC</span>
  <span class="avatar theme-success" data-bs-toggle="tooltip" data-bs-title="Release Bot">RB</span>
  <span class="avatar theme-info" data-bs-toggle="tooltip" data-bs-title="Docs Reviewer">DR</span>
  <span class="avatar avatar-subtle theme-secondary">+4</span>
</div>

Interactive Chips & Chip Input ([data-bs-chips])

maven-site-plugin doxia-2.0 bootstrap-6 typescript
supa-maven-skin bootstrap-6 
<!-- Static / Active Filter Chips -->
<span class="chip active theme-primary">maven-site-plugin</span>
<span class="chip theme-success">doxia-2.0</span>
<span class="chip theme-info">bootstrap-6</span>

<!-- Interactive Chip Tag Input (auto-initialized via [data-bs-chips]) -->
<div class="chip-input" data-bs-chips="true" data-bs-placeholder="Add topic tag...">
  <span class="chip">supa-maven-skin</span>
  <span class="chip">bootstrap-6</span>
  <input type="text" class="form-ghost" placeholder="Add topic tag..." aria-label="Add topic tag" />
</div>

Progress Bars, Spinners & Skeleton Placeholders

Progress Bars
78%
92% Coverage
Spinners & Placeholders

<!-- Progress Bars -->
<div class="progress" role="progressbar" aria-label="Build completion" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar theme-primary" style="width: 78%">78%</div>
</div>
<div class="progress" role="progressbar" aria-label="Test coverage" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped progress-bar-animated theme-success" style="width: 92%">92% Coverage</div>
</div>

<!-- Spinners & Glowing Placeholders -->
<div class="spinner-border spinner-border-sm theme-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<p class="placeholder-glow">
  <span class="placeholder col-7"></span>
  <span class="placeholder col-4"></span>
</p>

3. Alerts, Overlays, Dialogs, Drawers & Toasts

In addition to Furo's > [!NOTE] admonitions, site authors can use native Bootstrap 6 .alert components (via the > [!ALERT:theme dismissible] Markdown shorthand, HTML, or #bsAlert Velocity macro), native HTML5 <dialog class="dialog"> modals, <dialog class="drawer"> off-canvas sheets, .toast notifications, Tooltips, and Popovers.

Bootstrap 6 Alerts (> [!ALERT:theme dismissible] & .alert)

Maven Central Release Available

Version 0.2.0 is ready for staging with full Doxia 2.0 and Bootstrap 6 component support.

Build Verification Passed

All unit tests (vitest) and Maven Invoker integration tests (verify.bsh) succeeded with zero warnings.

Experimental Bootstrap 6 Alpha API

Pin bootstrap@6.0.0-alpha.1 in package.json when extending custom SCSS tokens.

> [!ALERT:primary dismissible] Maven Central Release Available
> Version `0.2.0` is ready for staging with full Doxia 2.0 and Bootstrap 6 component support.
>
> [!ALERT:success] Build Verification Passed
> All unit tests (`vitest`) and Maven Invoker integration tests (`verify.bsh`) succeeded with zero warnings.
>
> [!ALERT:warning dismissible] Experimental Bootstrap 6 Alpha API
> Pin `bootstrap@6.0.0-alpha.1` in `package.json` when extending custom SCSS tokens.
<div class="alert theme-primary" role="alert">
  <div class="flex-grow-1">
    <div class="alert-heading fw-semibold mb-1">Maven Central Release Available</div>
    <p class="mb-0">Version <code>0.2.0</code> is ready for staging.</p>
  </div>
  <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
#bsAlert("primary", "<strong>Maven Central Release Available:</strong> Version 0.2.0 is ready.")
#bsAlert("success", "<strong>Build Verification Passed:</strong> All unit and Invoker tests succeeded.")

Interactive Overlays: Dialog Modal, Drawer Sheet, Live Toast, Tooltips & Popovers

Bootstrap 6 Native <dialog> Modal

Bootstrap 6 replaces legacy div.modal overlays with the native HTML5 <dialog class="dialog"> element, providing built-in top-layer rendering and focus trapping.
Inspector Drawer

Drawers also use native <dialog class="drawer"> elements and support start, end, top, and bottom placements.
Supa Maven Skin Just now
Site assets compiled and bundled successfully!
<!-- Triggers for Dialog, Drawer, Toast, Tooltip & Popover -->
<button type="button" class="btn btn-solid theme-primary" data-bs-toggle="dialog" data-bs-target="#demoModalDialog">Open Modal Dialog</button>
<button type="button" class="btn btn-outline theme-primary" data-bs-toggle="drawer" data-bs-target="#demoRightDrawer">Open Right Drawer</button>
<button type="button" class="btn btn-subtle theme-success" data-supa-toast-target="#demoLiveToast">Trigger Live Toast</button>
<button type="button" class="btn btn-outline theme-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip powered by Floating UI">Hover for Tooltip</button>
<button type="button" class="btn btn-outline theme-info" data-bs-toggle="popover" data-bs-placement="top" data-bs-title="Bootstrap 6 Popover" data-bs-content="Auto-initialized on page load.">Click for Popover</button>

<!-- Native HTML5 <dialog class="dialog"> Modal -->
<dialog class="dialog" id="demoModalDialog" aria-labelledby="demoModalDialogTitle">
  <div class="dialog-content">
    <div class="dialog-header">
      <div class="dialog-title fw-semibold" id="demoModalDialogTitle">Bootstrap 6 Native &lt;dialog&gt; Modal</div>
      <button type="button" class="btn-close" data-bs-dismiss="dialog" aria-label="Close"></button>
    </div>
    <div class="dialog-body">
      <p>Native HTML5 <code>&lt;dialog class="dialog"&gt;</code> with built-in top-layer rendering and focus trapping.</p>
    </div>
    <div class="dialog-footer">
      <button type="button" class="btn btn-subtle theme-secondary" data-bs-dismiss="dialog">Cancel</button>
      <button type="button" class="btn btn-solid theme-primary" data-bs-dismiss="dialog">Confirm Action</button>
    </div>
  </div>
</dialog>

<!-- Native HTML5 <dialog class="drawer"> Off-Canvas Drawer -->
<dialog class="drawer drawer-end drawer-sheet" id="demoRightDrawer" aria-labelledby="demoRightDrawerTitle">
  <div class="drawer-header">
    <div class="drawer-title fw-semibold" id="demoRightDrawerTitle">Inspector Drawer</div>
    <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Close"></button>
  </div>
  <div class="drawer-body">
    <p>Supports <code>.drawer-start</code>, <code>.drawer-end</code>, <code>.drawer-top</code>, and <code>.drawer-bottom</code>.</p>
  </div>
</dialog>

4. Navigation, Menus, Tabs, Breadcrumbs, Pagination & Steppers

Bootstrap 6 unifies dropdowns and context menus into the new Menu component ([data-bs-toggle="menu"]), adds NavOverflow for responsive horizontal tabs, and introduces the Stepper workflow indicator.

Menus ([data-bs-toggle="menu"]), Nav Pills & Underline Tabs

Maven Coordinates
Configure maven-site-plugin 3.21.0+ in your pom.xml and run mvn site.
Publish the skin JAR to Maven Local or Maven Central for multi-project consumption.
Consume Doxia-compatible site descriptors across JVM build tools.
<!-- Bootstrap 6 Menu ([data-bs-toggle="menu"]) -->
<div class="position-relative d-inline-block">
  <button type="button" class="btn btn-solid theme-primary" data-bs-toggle="menu" aria-expanded="false">
    Artifact Actions &#9662;
  </button>
  <div class="menu">
    <div class="menu-header">Maven Coordinates</div>
    <button type="button" class="menu-item">Copy pom.xml Snippet</button>
    <button type="button" class="menu-item">Download Javadoc JAR</button>
    <hr class="menu-divider" />
    <button type="button" class="menu-item theme-danger">Deprecate Version</button>
  </div>
</div>

<!-- Bootstrap 6 Nav Pills & Tab Panes ([data-bs-toggle="tab"]) -->
<ul class="nav nav-pills" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#bsTabMaven" type="button" role="tab">Maven</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#bsTabGradle" type="button" role="tab">Gradle</button>
  </li>
</ul>
<div class="tab-content p-3 rounded border">
  <div class="tab-pane fade show active" id="bsTabMaven" role="tabpanel">Maven instructions...</div>
  <div class="tab-pane fade" id="bsTabGradle" role="tabpanel">Gradle instructions...</div>
</div>

Multi-Step Workflow Stepper (.supa-stepper Shorthand & .stepper)

Authors can write a simple <ol class="supa-stepper" title="3"> ordered list or full Bootstrap 6 .stepper.stepper-horizontal markup:

  1. Compile SCSS & TypeScript
  2. Package Skin JAR
  3. Run Invoker Site ITs
  4. Publish to github.com
<ol class="supa-stepper" title="3">
  <li class="active">Compile SCSS &amp; TypeScript</li>
  <li class="active">Package Skin JAR</li>
  <li class="active">Run Invoker Site ITs</li>
  <li>Publish to github.com</li>
</ol>
<ol class="stepper stepper-horizontal">
  <li class="stepper-item active">Compile SCSS &amp; TypeScript</li>
  <li class="stepper-item active">Package Skin JAR</li>
  <li class="stepper-item active">Run Invoker Site ITs</li>
  <li class="stepper-item">Publish to github.com</li>
</ol>

Breadcrumbs & Pagination

Doxia drops aria-* and tabindex attributes from raw-HTML links, so Supa Maven Skin restores Bootstrap's aria-disabled="true" and tabindex="-1" on disabled page links (.page-item.disabled > .page-link) when the page loads.

<!-- Bootstrap 6 Breadcrumb -->
<nav aria-label="Breadcrumb">
  <ol class="breadcrumb mb-0">
    <li class="breadcrumb-item"><a class="breadcrumb-link" href="index.html">Docs</a></li>
    <li class="breadcrumb-divider" aria-hidden="true"></li>
    <li class="breadcrumb-item"><a class="breadcrumb-link" href="kitchen-sink.html">Showcase</a></li>
    <li class="breadcrumb-divider" aria-hidden="true"></li>
    <li class="breadcrumb-item"><span class="breadcrumb-link active" aria-current="page">Bootstrap 6 Components</span></li>
  </ol>
</nav>

<!-- Bootstrap 6 Pagination -->
<nav aria-label="Pagination">
  <ul class="pagination pagination-sm mb-0">
    <li class="page-item disabled"><a class="page-link" href="#" aria-disabled="true" tabindex="-1">Previous</a></li>
    <li class="page-item active" aria-current="page"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

5. Containers & Disclosure: Accordions, Cards, List Groups & Carousel

Declarative .supa-accordion Shorthand & Native <details class="accordion-item">

Wrap <div title="Question Title"> items inside <div class="supa-accordion"> (or use Bootstrap 6's native <details class="accordion-item">) to generate a full Bootstrap 6 .accordion:

initBootstrapComponents() automatically adds .not-prose to top-level Bootstrap component containers and applies CSS guardrails in _bootstrap-supa.scss so lists, links, and headings inside components never inherit article prose styles.

All 20 Bootstrap 6 plugins ship with the skin. Eleven are on window.bootstrap on every page: Alert, Button, Collapse, Dialog, Drawer, Menu, Popover, ScrollSpy, Toast, Toggler, and Tooltip. The other nine (Carousel, Chips, Combobox, Datepicker, NavOverflow, OtpInput, Range, Strength, and Tab) load only on pages whose markup uses them, and join window.bootstrap before html[data-supa-ready] is set.

Yes. site-macros.vm provides #bsAlert, #bsBadge, and #bsCard macros for Doxia pages rendered through Velocity.

<div class="supa-accordion">
  <div title="How does Supa Maven Skin isolate Bootstrap components from .prose?" class="open">
    <p><code>initBootstrapComponents()</code> automatically adds <code>.not-prose</code> to top-level Bootstrap component containers.</p>
  </div>
  <div title="Which Bootstrap 6 JavaScript plugins are on window.bootstrap?">
    <p>All 20 Bootstrap 6 plugins ship with the skin. Eleven are on <code>window.bootstrap</code> on every page, and the other nine join it on pages whose markup uses them.</p>
  </div>
</div>
<div class="accordion" id="faqAccordion">
  <details class="accordion-item" name="faqAccordion" open>
    <summary class="accordion-header fw-semibold">
      <span>How does Supa Maven Skin isolate Bootstrap components from .prose?</span>
    </summary>
    <div class="accordion-body">
      <p><code>initBootstrapComponents()</code> automatically adds <code>.not-prose</code> to component containers.</p>
    </div>
  </details>
</div>

Cards & Actionable List Groups

Skin Architecture v0.2.0
Three-Column Furo Layout

Sticky 256px navigation sidebar, 56rem centered prose article, and 224px ScrollSpy table of contents.

View Configuration
Updated via frontend-maven-plugin
Overview & Quick Start
Configure maven-site-plugin 3.21.0
Guide
Custom site.xml Options
Light/Dark palettes, KaTeX, Mermaid
30 Options
Kitchen Sink Showcase
Typography, Admonitions, Code & Diagrams
Demo 
<!-- Bootstrap 6 Card -->
<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span class="fw-semibold">Skin Architecture</span>
    <span class="badge badge-subtle theme-primary">v0.2.0</span>
  </div>
  <div class="card-body">
    <div class="card-title h5">Three-Column Furo Layout</div>
    <p class="card-text text-body-secondary">Sticky 256px navigation sidebar and 56rem prose article.</p>
    <a href="configuration.html" class="btn btn-sm btn-solid theme-primary">View Configuration</a>
  </div>
</div>
<!-- Actionable List Group -->
<div class="list-group">
  <a href="index.html" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
    <span class="fw-semibold">Overview &amp; Quick Start</span>
    <span class="badge rounded-pill theme-primary">Guide</span>
  </a>
</div>
#bsCard("Three-Column Furo Layout", "<p>Sticky 256px navigation sidebar, 56rem centered prose article, and 224px ScrollSpy table of contents.</p>")

6. Forms & Bootstrap 6 Rich Input Widgets

Bootstrap 6 adds native interactive widgets for Combobox ([data-bs-toggle="combobox"]), Datepicker ([data-bs-toggle="datepicker"]), OTP Input ([data-bs-otp]), Range Slider (.form-range), and Password Strength Meter ([data-bs-strength]), alongside standard .form-control, .form-select, .check, .radio, .switch, and .input-group.

Strong 
<!-- Searchable Combobox ([data-bs-toggle="combobox"]) -->
<div class="dropdown">
  <button type="button" class="form-control combobox-toggle" data-bs-toggle="combobox" aria-expanded="false">
    <span class="combobox-value">Apache Maven 3.9+</span>
  </button>
  <div class="menu w-100">
    <div class="combobox-search">
      <input type="text" class="form-control form-control-sm combobox-search-input" placeholder="Filter build tools..." />
    </div>
    <button type="button" class="menu-item selected" data-bs-value="maven">Apache Maven 3.9+</button>
    <button type="button" class="menu-item" data-bs-value="doxia2">Maven Doxia 2.0</button>
  </div>
</div>

<!-- Calendar Datepicker, 6-Digit OTP, Range Slider & Password Strength -->
<input type="text" class="form-control" data-bs-toggle="datepicker" value="2026-10-20" />
<div class="otp" data-bs-otp="true" data-bs-length="6">
  <input type="text" class="otp-input" maxlength="6" value="428190" aria-label="Verification code" />
</div>
<div class="form-range" data-bs-bubble="true">
  <input type="range" class="form-range-input" min="0" max="100" value="75" aria-label="Scale" />
</div>
<input type="password" id="demoStrengthInput" class="form-control" value="SupaBootstrap6!2026" />
<div class="strength" data-bs-strength="strong" data-bs-input="#demoStrengthInput">
  <span class="strength-segment active"></span>
  <span class="strength-segment active"></span>
  <span class="strength-segment active"></span>
  <span class="strength-segment active"></span>
</div>

The Datepicker's calendar comes from vanilla-calendar-pro, whose month view shows each month's short name (“Jan”) but labels its button with the long one (“January”). Supa Maven Skin removes those labels, so each month is named by the text it shows in any data-bs-locale, and a voice-control user can say “click Jan” (WCAG 2.5.3 Label in Name). It does this through Bootstrap's Datepicker.Default.vcpOptions, which covers every picker on the page, including those your own scripts create. A picker created with its own vcpOptions replaces those defaults, so spread them into yours once the Datepicker has loaded (see Running Scripts After the Skin Initializes):

new bootstrap.Datepicker(field, {
  vcpOptions: { ...bootstrap.Datepicker.Default.vcpOptions, disableWeekdays: [0, 6] }
});

A vcpOptions set in markup, through a data-bs-vcp-options or data-bs-config attribute, replaces the defaults too, and JSON cannot spread them, so such a picker keeps vanilla-calendar-pro's long-name labels. Create that picker in script with the spread shown above instead.

Documentation channels