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.
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.
Fluent Surface Card
Native Windows 11 rounded cards with micro-elevation.
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 Push Buttons
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.
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.
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.
Material 3 Surface
Container styled after Material 3 guidelines.
Linux (GNOME Adwaita / GTK4)
Use .native-linux or [data-boodoo-platform="linux"] for Libadwaita header bars and GTK4 rounded widget styling.
GTK4 / Libadwaita desktop controls.