Interactivity

Svelte adapter

Own Boobstrap interaction state in Svelte 5 with SSR-safe runes, headless action directives, and consumer-controlled markup.

Svelte 5.0+Runes & Actionsv0.7.0 current

Interactivity

Svelte 5 integration

The official @boobstrap/svelte adapter gives you complete ownership of your semantic HTML. Primitives support both dual action directives (use:dialog.dialog) and prop-getter spreading ({...dialog.getDialogProps()}).

Install

Terminal · Svelte packages

npm install @boobstrap/boobstrap @boobstrap/svelte svelte

JavaScript · Application entry

import "@boobstrap/boobstrap/dist/boobstrap.css";
import { createCollapse } from "@boobstrap/svelte";

Use one behavior owner. Do not call initBoobstrap on Svelte-owned markup. A primitive supplies reactive runes state, ARIA attributes, event handlers, and actions; your template supplies semantic elements and bs-* classes.

Compose a collapse

The preview below demonstrates a Svelte 5 component. The primitive manages expanded state, panel relationships, and transitions.

Profile, security, and notification settings.

Svelte · Collapse primitive

<script>
import { createCollapse } from "@boobstrap/svelte";

const details = createCollapse({ id: "svelte-account-details", defaultOpen: true });
</script>

<button class="bs-btn bs-btn-secondary" {...details.getTriggerProps()}>
  Account details
</button>
<div class="bs-collapse bs-card bs-mt-4" {...details.getPanelProps()}>
  <div class="bs-card-body">Profile, security, and notification settings.</div>
</div>

Dialog with action directives

You can also attach behavior via Svelte actions directly to DOM elements:

Svelte · Action directives

<script>
import { createDialog } from "@boobstrap/svelte";

const dialog = createDialog({ id: "profile-dialog" });
</script>

<button class="bs-btn bs-btn-primary" use:dialog.trigger>Edit profile</button>

<dialog class="bs-dialog" use:dialog.dialog>
  <div class="bs-dialog-header">
    <h3 class="bs-dialog-title">Edit Profile</h3>
  </div>
  <div class="bs-dialog-body">
    <p>Update your account details.</p>
  </div>
  <div class="bs-dialog-footer">
    <button class="bs-btn bs-btn-secondary" onclick={() => dialog.hide("cancel")}>Cancel</button>
    <button class="bs-btn bs-btn-primary" onclick={() => dialog.hide("save")}>Save</button>
  </div>
</dialog>

Events and lifecycle

All primitives emit cancelable before-events and completed lifecycle events. Detail payloads include adapter: "svelte", transition reasons, and native source events.

Runes support

Designed natively for Svelte 5 runes and backward compatible with Svelte 4 options.

SSR-safe

Avoids DOM mutation during import and initialization for seamless SSR hydration.

Dual ergonomics

Choose between prop getters ({...getProps()}) or action directives (use:action).

Full parity

All 18 Boobstrap interactive components are fully supported.

Primitives API

Svelte primitives export reactive runes state, action directives, prop getters, and event dispatchers.

Primitive	Public contract
`createAccordion`	Coordinates grouped collapse states with single-open or multi-open options.
`createButton`	Loading state, busy indicators, start/stop/toggle actions, and keyboard handling.
`createCollapse`	Toggleable panel expansion with trigger and panel action bindings.
`createDialog`	Native modal synchronization, backdrop dismissal, Escape handling, and focus restoration.
`createDrawer`	Slide-out offcanvas drawer panels with focus trapping and gesture dismissal.
`createDropdown`	Menu positioning, outside-click dismissal, arrow key navigation, and focus restoration.
`createCombobox`	Search query filtering, floating listbox positioning, and option keyboard selection.
`createTabs`	Selected tab state, automatic activation, roving keyboard focus, and panel association.
`createToast`	Notification auto-hide timers with pause-on-hover and polite screen-reader announcements.
`createTooltip`	Floating tooltip positioning on hover and keyboard focus with Escape dismissal.
`createPopover`	Floating popover containers with outside-click dismiss and trigger association.
`createCommandPalette`	Cmd+K / Ctrl+K keyboard shortcut dialog with query filtering and item selection.