Install via npm

The official way to get boodoo is to install it as a package manager dependency. This lets you use the precompiled CSS and JS, or compile your own customized version from source.

Install with npm

npm install boodoo

boodoo is available as an npm package. It ships compiled CSS and JS in dist/, plus the Sass and Less source.

Installed UI Demo

Once installed, simply import Boodoo to activate ready-to-use buttons, alerts, and components in your application:

<button type="button" class="btn btn-primary"><span>npm Package Ready</span></button>
<button type="button" class="btn btn-outline-dark"><span>Modular Import</span></button>
<span class="badge bg-success"><span>v1.1.5</span></span>

ES modules

If you're using a bundler like Vite, webpack, or Rollup, you can import directly from the package entry point or via deep path:

// Standard package import (ESM)
import boodoo from 'boodoo';
import { Modal, Toast, Collapse } from 'boodoo';

// Or direct bundle path
import boodoo from 'boodoo/dist/js/boodoo.esm.js';

Import compiled CSS

// Subpath export
import 'boodoo/css';

// Or direct file path
import 'boodoo/dist/css/boodoo.min.css';

Compile from Sass

For full control, import the Sass entry in your own stylesheet. Override boodoo's variables before the import to customize everything:

// Your custom overrides (optional)
$boodoo-primary: #7C3AED;
$boodoo-border-radius: 0.375rem;

// Then import boodoo
@import "node_modules/boodoo/scss/boodoo";

Package exports

The package exposes standard entry points and subpath exports via package.json:

{
  "style": "dist/css/boodoo.css",
  "sass": "scss/boodoo.scss",
  "main": "dist/js/boodoo.js",
  "module": "dist/js/boodoo.esm.js",
  "exports": {
    ".": {
      "import": "./dist/js/boodoo.esm.js",
      "require": "./dist/js/boodoo.js"
    },
    "./css": "./dist/css/boodoo.min.css",
    "./tokens": "./tokens/index.js",
    "./tokens.json": "./tokens/tokens.json",
    "./paper": "./react-native/paper.js",
    "./react-native": "./react-native/index.js"
  }
}

Desktop & Electron Usage

In Electron or hybrid desktop projects, install boodoo via npm and reference it directly in your renderer HTML (node_modules/boodoo/dist/css/boodoo.min.css) or import it inside your bundler entry point (Vite, Webpack, Electron Forge). See our Electron Desktop guide for complete setup and frameless window controls.