Installation

Installation

Install Boobstrap and the recommended Lucide icon set with your preferred package manager, then import the compiled stylesheet once at your application entry point.

npm install @boobstrap/boobstrap lucide

import "@boobstrap/boobstrap/dist/boobstrap.css";

Add Lucide icons

Lucide is the recommended icon set for Boobstrap projects and is used throughout these docs. Import only the icons a page needs, then initialize its data-lucide markers:

<button class="bs-btn bs-btn-primary" type="button">
  <i data-lucide="plus" class="bs-icon" aria-hidden="true"></i>
  Create
</button>

import { Plus, createIcons } from "lucide";
createIcons({ icons: { Plus } });

React and Vue projects can use the equivalent lucide-react and lucide-vue-next packages.

Use from a CDN

For a plain HTML project, load the version-pinned stylesheet directly from jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@boobstrap/boobstrap@0.7.0/dist/boobstrap.css" />

To self-host instead, copy dist/boobstrap.css from the installed package into your assets.

Add optional behavior

CSS is enough for visual components. Import the initializer only when the page uses controllers such as collapse, dropdown, tabs, toasts, tooltips, popovers, masks, OTP, or dismissible banners.

import "@boobstrap/boobstrap/dist/boobstrap.css";
import { initBoobstrap } from "@boobstrap/boobstrap/js";

const boobstrap = initBoobstrap(document);

// Call when your application is torn down.
boobstrap.destroy();

Use a framework adapter

Choose one owner for interactive state. Alpine, React, and Vue adapters are separate packages so CSS-only projects do not download code they never execute.

npm install @boobstrap/boobstrap @boobstrap/alpine alpinejs
# or
npm install @boobstrap/boobstrap @boobstrap/react react
# or
npm install @boobstrap/boobstrap @boobstrap/vue vue

Continue with the React adapter guide or Vue adapter guide for stylesheet imports, SSR, state ownership, lifecycle details, and component examples.