Native components

Style hybrid, desktop, or cross-platform web applications (such as Electron, Tauri, React Native Web, or Cordova/Capacitor) using platform-native visual conventions for Windows, macOS, iOS, iPadOS, Android, and Linux. For Electron configuration and titlebar drag mechanics, read the Electron Desktop guide.

Windows (Fluent Design & Mica)

Use .native-win or [data-boodoo-platform="windows"] to apply Windows 11 Fluent Design tokens, subtle acrylic/mica blurs, and standard titlebar controls.

Windows Hybrid App

Fluent Surface Card

Native Windows 11 rounded cards with micro-elevation.

<div class="native-win">
  <div class="native-window">
    <header class="native-titlebar">
      <span>Windows Hybrid App</span>
      <div class="native-titlebar-controls">
        <button type="button" class="native-titlebar-btn"><span>—</span></button>
        <button type="button" class="native-titlebar-btn"><span>▢</span></button>
        <button type="button" class="native-titlebar-btn native-titlebar-close"><span>✕</span></button>
      </div>
    </header>
    <div class="p-3">
      <div class="native-card">
        <h5><span>Fluent Surface Card</span></h5>
        <button type="button" class="native-btn native-btn-primary"><span>Fluent Action</span></button>
      </div>
    </div>
  </div>
</div>

macOS (Aqua & Vibrancy)

Use .native-mac or [data-boodoo-platform="macos"] to render SF Pro typography, window traffic lights, translucent sidebar navigation, and gradient push buttons.

macOS Desktop App

macOS Push Buttons

<div class="native-mac">
  <div class="native-window">
    <div class="native-traffic-lights">
      <div class="native-dot dot-close"></div>
      <div class="native-dot dot-minimize"></div>
      <div class="native-dot dot-maximize"></div>
    </div>
    <header class="native-titlebar">
      <span>macOS Desktop App</span>
    </header>
    <div class="native-window-content">
      <nav class="native-sidebar">
        <a href="#" class="native-sidebar-item active"><span>Dashboard</span></a>
      </nav>
      <div class="p-3">
        <button type="button" class="native-btn native-btn-primary"><span>Primary Action</span></button>
      </div>
    </div>
  </div>
</div>

iOS (Human Interface Guidelines)

Use .native-ios or [data-boodoo-platform="ios"] to build iOS-style navigation bars, segmented controls, grouped inset lists, and 50px touch-friendly action buttons.

First

Second

Third

Notifications On

Privacy & Security ›

<div class="native-ios">
  <div class="native-navbar">
    <a href="#" class="native-nav-link"><span>Back</span></a>
    <span>Settings</span>
    <a href="#" class="native-nav-link"><span>Done</span></a>
  </div>
  <div class="p-3">
    <div class="native-list-grouped">
      <div class="native-list-item">
        <span>Notifications</span>
        <span class="text-muted"><span>On</span></span>
      </div>
    </div>
  </div>
</div>

iPadOS (Sidebar & Split View)

Use .native-ipados or [data-boodoo-platform="ipados"] for multi-column split view layouts optimized for tablet touch & pointer interaction.

Detail View

iPadOS split view pane content layout.

<div class="native-ipados">
  <div class="native-split-view">
    <aside class="native-sidebar-col">
      <h6 class="fw-bold mb-2"><span>Library</span></h6>
    </aside>
    <main class="native-detail-col">
      <h5 class="fs-6 fw-bold"><span>Detail View</span></h5>
    </main>
  </div>
</div>

Android (Material Design 3)

Use .native-android or [data-boodoo-platform="android"] for Material You 3 elevated top app bars, pills, and 20px rounded pill buttons.

Android App Bar

Material 3 Surface

Container styled after Material 3 guidelines.

<div class="native-android">
  <div class="native-appbar">
    <span>Android App Bar</span>
  </div>
  <div class="p-3">
    <div class="native-card">
      <h6 class="fw-bold"><span>Material 3 Surface</span></h6>
    </div>
    <button type="button" class="native-btn native-btn-primary"><span>Material Action</span></button>
  </div>
</div>

Linux (GNOME Adwaita / GTK4)

Use .native-linux or [data-boodoo-platform="linux"] for Libadwaita header bars and GTK4 rounded widget styling.

Linux Application

GTK4 / Libadwaita desktop controls.

<div class="native-linux">
  <header class="native-headerbar">
    <span class="native-header-title"><span>Linux Application</span></span>
    <button type="button" class="native-btn"><span>Options</span></button>
  </header>
  <div class="p-3">
    <button type="button" class="native-btn native-btn-primary"><span>Adwaita Action</span></button>
  </div>
</div>

Photon (Electron & Classic Desktop UI)

Use .native-photon or [data-boodoo-platform="photon"] to render classic macOS/Electron desktop chrome: native toolbars, segmented button groups, pane splitters, sidebars, and tab groups without external styling dependencies.

Workspace ✕

Settings

Classic desktop UI components styled with lightweight Boodoo tokens.

<div class="native-photon">
  <header class="toolbar-header">
    <span class="title"><span>Photon App Window</span></span>
  </header>
  <div class="window-content">
    <div class="pane-group">
      <div class="pane pane-sidebar">
        <nav class="nav-group">
          <h6 class="nav-group-title"><span>Navigation</span></h6>
          <a href="#" class="nav-group-item active"><span>Home</span></a>
        </nav>
      </div>
      <div class="pane p-3">
        <div class="tab-group">
          <div class="tab-item active"><span>Workspace</span></div>
        </div>
      </div>
    </div>
  </div>
</div>