Interactivity

Behavior layers

Choose CSS only, Boobstrap JS, Alpine, React, Vue, or your own application behavior.

Interactivity guideCopy-ready referencev0.7.0 current

Interactivity

Choose your behavior layer

Boobstrap never requires a runtime. Static HTML can use the complete visual system by itself; interactive projects can initialize dependency-free controllers or let Alpine, React, or Vue own the same component contract.

Base

CSS only

Use semantic markup and every bs- class without loading JavaScript.

Official

Boobstrap JS

Progressively enhance accordions, notifications, overlays, navigation, form helpers, and floating content through explicit controllers.

Official adapter

Alpine.js

Keep reactive state in Alpine with reusable x-data providers and x-bind objects.

Official adapter

React

Use SSR-safe headless hooks with controlled or uncontrolled React state and consumer-owned markup.

Official adapter

Vue

Use SSR-safe headless composables with refs, computed state, and consumer-owned templates.

The classes, events, and accessibility contract stay consistent while the selected behavior layer owns state.

Importing the stylesheet remains runtime-free. Initialize all supported controllers, or import one component from a dedicated subpath.

JavaScript · Boobstrap JS

npm install @boobstrap/boobstrap

import "@boobstrap/boobstrap";
import { initBoobstrap } from "@boobstrap/boobstrap/js";

const boobstrap = initBoobstrap();

The adapter registers providers for accordion, button, collapse, combobox, dialog, dropdown, popover, tabs, toast, and tooltip. Register it before starting Alpine. The same plugin also supports @alpinejs/csp, and v0.5 includes declarations for every exported provider.

JavaScript · Alpine.js

npm install @boobstrap/boobstrap @boobstrap/alpine alpinejs

import "@boobstrap/boobstrap";
import Alpine from "alpinejs";
import boobstrap from "@boobstrap/alpine";

Alpine.plugin(boobstrap);
Alpine.start();

View @boobstrap/alpine on npm. Alpine remains an application-level peer dependency and is never installed by the core framework.

The adapter provides SSR-safe headless hooks for accordion, button, collapse, combobox, dialog, dropdown, popover, tabs, toast, and tooltip. State remains controlled or uncontrolled as each hook supports, while prop getters preserve semantic, consumer-owned markup.

JavaScript · React

npm install @boobstrap/boobstrap @boobstrap/react react

import "@boobstrap/boobstrap";
import { useAccordion, useButton, useCollapse, useCombobox, useDialog, useDropdown, usePopover, useTabs, useToast, useTooltip } from "@boobstrap/react";

See the React adapter guide for installation, SSR, controlled state, lifecycle events, and links to every component example.

The adapter provides SSR-safe headless composables. Plain values and Vue refs both work for controlled state, and prop getters bind directly to semantic template elements.

JavaScript · Vue

npm install @boobstrap/boobstrap @boobstrap/vue vue

import "@boobstrap/boobstrap";
import { useAccordion, useButton, useCollapse, useCombobox, useDialog, useDropdown, usePopover, useTabs, useToast, useTooltip } from "@boobstrap/vue";

See the Vue adapter guide for complete template composition and controlled-state examples.

Adapter parity

The official adapters cover the same stateful component families where application-owned reactivity is useful. Browser-specific progressive enhancements remain core-only. The framework publishes this mapping as interactionContract, and its conformance suite verifies the declared capability and event surface.

Surface	Boobstrap JS	Alpine	React	Vue
Accordion	`Accordion`	`accordion`	`useAccordion`	`useAccordion`
Button	`Button`	`button`	`useButton`	`useButton`
Collapse, combobox, dialog, dropdown	Controllers	Named providers	`use*` hooks	`use*` composables
Popover, tabs, toast, tooltip	Controllers	Named providers	`use*` hooks	`use*` composables
Banner, input mask, OTP, password, sidebar	Controllers	Use core or application behavior	Use core or application behavior	Use core or application behavior

JavaScript · Inspect the conformance manifest

import { interactionContract } from "@boobstrap/boobstrap/js";

const toast = interactionContract.toast;
console.log(toast.adapters.vue); // useToast
console.log(toast.capabilities); // duration, autohide, pointer/focus pause…

Do not stack behavior layers. Use Boobstrap JS, Alpine, React, or Vue on a component subtree—not more than one. See the Accordion guide for the same grouped-disclosure contract in all four layers and the TypeScript guide for declaration coverage.

CSS only

Choose CSS only for static components and when your application already owns all state and accessibility behavior.

One owner

Use Boobstrap JS, Alpine, React, Vue, or custom application code for a component—not multiple controllers on the same markup.

Progressive enhancement

Start from meaningful HTML and a readable initial state. Add behavior after the content remains usable without script execution.