Skip to main content

Platforms & Frameworks

Boodoo is engineered with zero JavaScript framework lock-in. Whether you are building with Angular, Cordova/PhoneGap, Meteor.js, Photon desktop UI, React Native Web, or Native Mobile (iOS & Android), Boodoo integrates cleanly into your stack.

🅰️
Angular

Zero build collision. Import stylesheets into angular.json or component styles, and call Boodoo APIs inside lifecycle methods.

📱
Cordova & PhoneGap

Optimized for hybrid WebViews with automatic deviceready event hooks, viewport safe areas, and touch ergonomics.

☄️
Meteor.js

Instant reactivity in Meteor Blaze or React templates with zero CSS bundle conflicts.

💡
Photon Desktop UI

Built-in Electron and macOS native desktop chrome: header toolbars, pane groups, and tab bars with .native-photon.

📱
React Native Web

Combine universal React Native components with Boodoo responsive CSS classes and design tokens.

⚡
create-boodoo CLI

Instantly scaffold working starters for all platforms using npx create-boodoo.

1. Angular Integration

Install boodoo in your Angular project:

npm install boodoo

Include the compiled CSS bundle in your angular.json under architect.build.options.styles:

"styles": [
  "node_modules/boodoo/dist/css/boodoo.min.css",
  "src/styles.css"
],
"scripts": [
  "node_modules/boodoo/dist/js/boodoo.js"
]

Or import Boodoo inside your root styles.scss:

@import "boodoo/scss/boodoo";

You can trigger Boodoo toasts and interactive components from Angular TypeScript controllers:

import { Component } from '@angular/core';

declare const boodoo: any;

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div class="container py-4">
      <div class="card p-4 shadow-sm">
        <h2 class="text-primary">Angular + Boodoo</h2>
        <button type="button" class="btn btn-primary" (click)="showToast()">Show Toast</button>
      </div>
    </div>
  `
})
export class AppComponent {
  showToast() {
    boodoo?.toast?.('Angular triggered Boodoo notification!', { variant: 'primary' });
  }
}

2. Cordova & PhoneGap Hybrid Apps

Boodoo is lightweight and fast, making it ideal for mobile WebViews without runtime overhead. Boodoo's JS core automatically listens for the Cordova/PhoneGap deviceready lifecycle event.

In your index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
  <title>Hybrid Mobile App</title>
  <link rel="stylesheet" href="node_modules/boodoo/dist/css/boodoo.min.css">
  <style>
    body {
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }
  </style>
</head>
<body class="native-ios bg-light">
  <header class="native-navbar">
    <span class="fs-6 fw-bold">Mobile App</span>
    <span class="badge bg-success">Ready</span>
  </header>
  <main class="container py-3">
    <div class="card p-3 shadow-sm">
      <button type="button" class="btn btn-primary w-100 rounded-pill" id="action-btn">Trigger Alert</button>
    </div>
  </main>
  <script src="cordova.js"></script>
  <script src="node_modules/boodoo/dist/js/boodoo.js"></script>
</body>
</html>

3. Meteor.js Full-Stack

Meteor applications benefit from Boodoo's zero-build runtime compatibility. Add Boodoo to your Meteor app:

meteor npm install boodoo

In your client entrypoint (e.g. client/main.js):

import 'boodoo/dist/css/boodoo.min.css';
import boodoo from 'boodoo';
import { Template } from 'meteor/templating';
import './main.html';

Template.dashboard.events({
  'click #btn-notify'() {
    boodoo.toast('Meteor reactive update delivered!', { variant: 'success' });
  }
});

4. Photon Desktop UI

For Electron, desktop, or classic macOS-style window layouts, Boodoo ships built-in Photon UI classes:

  • .native-photon or [data-boodoo-platform="photon"] — Activates the Photon desktop styling container
  • .toolbar-header / .toolbar-footer — Native gradient toolbars with dragging enabled
  • .window-content, .pane-group, and .pane-sidebar — Responsive split window panes
  • .nav-group and .nav-group-item — Classic desktop sidebar navigation items
  • .tab-group and .tab-item — Desktop application tab bars

For live examples and interactive demos, visit the Photon Native UI Documentation.

5. React Native Web

When sharing code across React Native (iOS/Android) and React Native Web, you can import Boodoo's compiled CSS or design tokens into your web root:

import 'boodoo/dist/css/boodoo.min.css';
import { View, Text, TouchableOpacity } from 'react-native';

export default function App() {
  return (
    <View style={{ padding: 20 }}>
      <div className="card p-4 shadow-sm text-center">
        <h3 className="text-primary mb-2">React Native Web + Boodoo</h3>
        <p className="text-muted">Hybrid universal design architecture.</p>
      </div>
    </View>
  );
}

6. React Native Mobile (iOS & Android)

Boodoo delivers native mobile components and design tokens for pure iOS and Android applications with zero DOM and zero heavy runtime dependencies:

A. Native Boodoo Component Suite

Import clean, drop-in components with auto-theming, tactile touch feedback, and responsive typography:

import React from 'react';
import { BoodooProvider, Card, Button, Badge, Text } from 'boodoo/react-native';

export default function App() {
  return (
    <BoodooProvider theme="light">
      <Card variant="elevated">
        <Card.Title title="Native Mobile App" subtitle="iOS & Android" />
        <Card.Content>
          <Badge variant="primary">Zero Bloat</Badge>
          <Text variant="lead">Clean design system without Material 3 clutter.</Text>
        </Card.Content>
        <Card.Actions>
          <Button variant="primary" size="sm" onPress={() => console.log('Tapped!')}>
            Get Started
          </Button>
        </Card.Actions>
      </Card>
    </BoodooProvider>
  );
}

B. React Native Paper Theme Preset (Drop-in Adapter)

Already using React Native Paper? Upgrade your app's aesthetics without refactoring existing components using Boodoo's Material 3 theme preset:

import { Provider as PaperProvider } from 'react-native-paper';
import { boodooPaperLightTheme, boodooPaperDarkTheme } from 'boodoo/paper';

export default function App() {
  return (
    <PaperProvider theme={boodooPaperLightTheme}>
      <YourAppNavigation />
    </PaperProvider>
  );
}

C. Universal Design Tokens

Need raw tokens for custom StyleSheet.create layouts? Import token dictionaries directly:

import { colors, spacing, radii, typography, shadows } from 'boodoo/tokens';

const styles = StyleSheet.create({
  header: {
    backgroundColor: colors.primary,
    padding: spacing[4],
    borderRadius: radii.lg,
    ...shadows.md,
  },
});

For a detailed architectural comparison, read the boodoo vs React Native Paper guide.

7. Instant Scaffolding via create-boodoo

Run the official CLI scaffolder to generate a configured starter for any platform:

npx create-boodoo my-new-project

Choose from 10 curated templates:

  1. HTML5 + Sass Starter (Vanilla, Fast & Clean)
  2. Vite + Vanilla (Modern dev server & HMR)
  3. Next.js / React (App Router + Boodoo CSS)
  4. Electron Desktop App (Cross-Platform Native UI)
  5. Angular Starter (Standalone Components + Boodoo)
  6. Cordova & PhoneGap (Hybrid Mobile App)
  7. Meteor.js (Full-Stack Reactive App)
  8. Photon Desktop UI (Classic macOS / Electron Pane layout)
  9. React Native Web (Universal Web & Mobile)
  10. React Native Mobile (Expo) (Expo SDK 51, iOS & Android, Boodoo Native UI)