Native components

Style hybrid, desktop, or cross-platform web applications (such as Electron, Tauri, React Native Web, or Cordova/Capacitor) using authentic platform-native visual conventions for Windows 11, macOS Sonoma, iOS 17/18, iPadOS, Android Material Design 3, Linux GNOME Adwaita, and classic Photon Desktop. For Electron configuration and titlebar drag mechanics, read the Electron Desktop guide.

Windows 11 (Fluent Design & Mica)

Use .native-win or [data-boodoo-platform="windows"] to apply Windows 11 Fluent Design tokens, subtle acrylic/mica blurs, caption control titlebars, Segoe UI typography, and micro-elevated cards.

🪟 Fluent Desktop Application

Fluent Surface Card

Windows 11 layered acrylic surface with authentic elevation and focus border hierarchy.

<div class="native-win">
  <div class="native-window">
    <header class="native-titlebar">
      <span class="native-titlebar-title"><span>Fluent Desktop Application</span></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>Primary Action</span></button>
      </div>
    </div>
  </div>
</div>

macOS Sonoma (Aqua & Vibrancy)

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

macOS Desktop App

Grid List

macOS Push Buttons & Surfaces

Aqua styled gradient bevel buttons with native pressed states and SF Pro text.

<div class="native-mac">
  <div class="native-window">
    <header class="native-titlebar">
      <div class="native-traffic-lights">
        <span class="native-dot dot-close"></span>
        <span class="native-dot dot-minimize"></span>
        <span class="native-dot dot-maximize"></span>
      </div>
      <span class="native-titlebar-title"><span>macOS Desktop App</span></span>
    </header>
    <div class="native-window-content">
      <aside class="native-sidebar">
        <a href="#" class="native-sidebar-item active"><span>Dashboard</span></a>
      </aside>
      <main class="p-3">
        <button type="button" class="native-btn native-btn-primary"><span>Primary Action</span></button>
      </main>
    </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 with chevrons, and 50px touch-friendly action buttons.

Preferences

Profile

Security

Cloud

Notifications

Privacy & Security

›

Language & Region

English ›

<div class="native-ios">
  <nav class="native-navbar">
    <a href="#" class="native-nav-link"><span>‹ Back</span></a>
    <span class="native-nav-title"><span>Settings</span></span>
    <a href="#" class="native-nav-link"><span>Done</span></a>
  </nav>
  <div class="p-3">
    <div class="native-list-grouped">
      <div class="native-list-item">
        <span>Notifications</span>
        <span class="native-switch active"></span>
      </div>
    </div>
    <button type="button" class="native-btn native-btn-primary"><span>Continue</span></button>
  </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.

All Documents

12 items

iPadOS multi-column split layout with comfortable touch targets and rounded visual surfaces.

<div class="native-ipados">
  <div class="native-split-view">
    <aside class="native-sidebar-col">
      <h6 class="native-sidebar-title"><span>Files</span></h6>
      <a href="#" class="native-nav-item active"><span>All Documents</span></a>
    </aside>
    <main class="native-detail-col">
      <h5><span>All Documents</span></h5>
    </main>
  </div>
</div>

Android (Material Design 3 / Material You)

Use .native-android or [data-boodoo-platform="android"] for Material You 3 elevated top app bars, pill action buttons, and elevated tonal cards.

Inbox

⋮

Material 3 Elevated Card

Dynamic Color surface styling with Google Sans/Roboto typography and 16px corner radius.

<div class="native-android">
  <header class="native-appbar">
    <span class="native-appbar-title"><span>Inbox</span></span>
  </header>
  <div class="p-3">
    <div class="native-card">
      <h6 class="fw-bold"><span>Material 3 Elevated Card</span></h6>
    </div>
    <button type="button" class="native-btn native-btn-primary"><span>Filled Action</span></button>
  </div>
</div>

Linux (GNOME Adwaita / GTK4)

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

Files — Libadwaita

GNOME 40+ GTK4 desktop controls with Cantarell typography and soft Adwaita gray surfaces.

<div class="native-linux">
  <div class="native-window">
    <header class="native-headerbar">
      <span class="native-header-title"><span>Files — Libadwaita</span></span>
      <button type="button" class="native-window-close"><span>✕</span></button>
    </header>
    <div class="p-3">
      <button type="button" class="native-btn native-btn-primary"><span>Suggested Action</span></button>
    </div>
  </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">
      <aside 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>
      </aside>
      <main class="pane p-3">
        <div class="tab-group">
          <div class="tab-item active"><span>Workspace</span></div>
        </div>
      </main>
    </div>
  </div>
</div>