Skip to main content
boodoo v1.1.5 • Now Available for Web & React Native Mobile (iOS & Android)

The simplicity of Bootstrap. The flexibility of Tailwind. boodoo

A unified design framework for modern Web & React Native Mobile apps. Built with modular components, universal design tokens, and zero heavy dependencies.

Get Started CDN Installation GitHub (v1.1.5) 
$ npm install boodoo
$ sass scss/boodoo.scss css/boodoo.css
✔ Bundled 469 kB → boodoo.min.css   # 12 components · 100+ utilities
⚡
Zero Runtime Deps
Pure Vanilla JS
📦
~142 KB Minified
Ultra lightweight
📱
100% Mobile-First
Flexbox & CSS Grid
🎨
Source Theming
Sass & Less Tokens
Why boodoo?

Engineered for modern web applications

Combine flexbox responsive layout power with rich UI components and accessible touch interactions.

📱

Mobile first

12-column flexbox grid from 320px to 1400px+, plus a complete 2D CSS Grid utility suite.

⚡

Fast & zero-deps

Vanilla JS, ~56 KB bundle, zero runtime dependencies. Ships modular utility & grid builds.

🛡️

Accessible & touch

44px touch targets, focus-visible outlines, ARIA wiring, and swipe gesture support out of the box.

🎨

Source-first tokens

Every color, radius, and shadow is a token. Compile custom themes with Sass or Less in seconds.

Interactive Showcase

Everything you need, ready to drop in

Explore production-ready components: cards, buttons, switches, toasts, modals, badges, and flex utility classes.

1 Cards & Surfaces

Modular Card

Cards adapt gracefully to any container with customizable headers, overlays, and body styling.

2 Buttons & Badges

Primary Soft Outline Pill

3 Form Controls

4 Modals & Dialogs

Accessible modals with backdrop blur, focus trapping, centered positioning, and Escape key handling.

5 Interactive Toasts

Stackable, auto-dismissing toast notifications. Trigger toast popups with zero external dependencies.

6 Utility-First Classes

w-75
w-50
d-flex gap-2 rounded-pill
Cross-Platform Ready

Now in React Native & Mobile

Bring Boodoo's clean modern aesthetics to iOS and Android. Zero DOM, pure React Native StyleSheet engine, drop-in React Native Paper theme presets, and universal design tokens.

📱

Native Mobile Components (`boodoo/react-native`)

Drop-in `Button`, `Card`, `Badge`, `Text`, and `TextInput` with auto light/dark theming and touch ripples. 0 external packages, Expo Go ready.

🔄

React Native Paper Theme Adapter (`boodoo/paper`)

Skin your existing React Native Paper app in 2 lines with Boodoo's MD3 Light & Dark theme presets. Zero rewrite needed.

🎨

Universal Design Tokens (`boodoo/tokens`)

Shared brand palettes, spacing units, border radii, typography, and elevation shadows in JS and JSON formats.

Explore Mobile Examples → boodoo vs Paper
Mobile Screen (Expo / React Native) 
// Zero-bloat mobile component with Boodoo
import { BoodooProvider, Card, Button, Badge } from 'boodoo/react-native';

export default function App() {
  return (
    <BoodooProvider theme="auto">
      <Card variant="elevated">
        <Card.Title title="Boodoo Mobile" />
        <Card.Content>
          <Badge variant="success">iOS & Android</Badge>
        </Card.Content>
        <Card.Actions>
          <Button variant="primary" size="sm">
            Get Started
          </Button>
        </Card.Actions>
      </Card>
    </BoodooProvider>
  );
}
Quick Start

Get up and running in 60 seconds

Choose your preferred workflow — drop in via high-speed CDN or compile source tokens with your favorite package manager.

<!-- Drop CSS & JS directly in your <head> -->
<link href="https://cdn.dihadiwala.com/s/app_299a167f351ab3de/2026/09/boodoo.min-f5986ea1.css" rel="stylesheet">
<script src="https://cdn.dihadiwala.com/s/app_299a167f351ab3de/2026/09/boodoo-22f6ff5d.js"></script>
Zero Config Production-ready minified bundle loaded in a single request.
Full installation guide
Four Pillars

Four great design systems, one cohesive toolkit

boodoo synthesizes the best ideas from top frameworks into a single lightweight library.

🅱️

Bootstrap

Component structure, 12-col grid flex, modal overlays, data-* attributes JS API.
🏛️

Foundation

Clean structural scaffolding, rich typography scales, and subtle gray scales.
🌀

Tailwind

Functional utility classes, responsive variants, precise spacing scales.
💎

Material

Elevation shadows, motion curves, touch ripple effects, floating form labels.
Architecture Comparison

Why choose boodoo over the heavy giants?

See how boodoo delivers zero-dependency freedom, native CSS variable re-theming, dual Sass/Less compilation, and modern headless React hooks without legacy bloat.

Feature / Capability boodoo v1.1.5 Bootstrap 5 Tailwind CSS Material UI / MUI Foundation
Runtime Dependencies 0 (Pure Vanilla JS) Popper.js required Requires headless UI lib Heavy React + Emotion runtime jQuery / legacy plugins
Dual Sass + LESS Parity ✔ 100% Feature Parity ✖ Sass only ✖ PostCSS / Engine only ✖ CSS-in-JS only ✖ Sass only
Dynamic CSS Variables Theming ✔ Native CSS Custom Props Partial (requires recompile) Class-based generation ThemeProvider context ✖ Static Sass variables
Headless React Hooks ✔ Built-in (`boodoo/react`) ✖ Imperative DOM only Separate install (Headless UI) ✔ Deep React hooks ✖ jQuery DOM only
WAI-ARIA & a11y Announcer Suite ✔ Combobox 1.2, Tree & Trap Modal focus only Delegated to user ✔ ARIA integrated Basic accessibility
Enterprise Components ✔ Palette, Dropzone, Chip, Table ✖ Requires extra plugins ✖ Requires extra packages ✔ Broad components ✖ Legacy core components
Multi-Platform React Native ✔ Native Adapter + Paper Presets ✖ Web DOM only Via NativeWind Separate RNP library ✖ Web DOM only
DOM XSS Sanitization Tested ✔ Enforced in CI suite Manual sanitization required N/A (Utility classes only) JSX escaping ✖ Manual sanitization
Open Source & MIT Licensed

Ready to build something extraordinary?

boodoo is 100% free and open source. Explore our modular components, utility classes, and theme system to craft your next project today.

Get Started Now View License