Design themes in the Pro Style Guides, preview them live on iOS and Android, and scan a QR code to open your theme in the HeroUI Native app.
June 19, 2026
The Pro Style Guides now support HeroUI Native. The preview header has a Web | Native control in the center. Choose Native — or open that link — to tune tokens in the browser, preview them inside an iOS/Android phone frame, then scan a QR code to open the same theme in the HeroUI Native app on a real device.
Web + Native preview — The preview header’s Web | Native control switches platforms without leaving the editor. It stays available on Brand, Overview, and the other previews.
Live phone frame — iOS and Android segments render a scoped native overview with live theme tokens
Scan to preview — QR card deep-links into the HeroUI Native app with your current theme payload
Native CSS export — Export Uniwind-ready CSS alongside Web CSS and DESIGN.md
Native CSS import — Import native theme CSS (including Expo Google Fonts family names) and round-trip without breaking the web preview
Scoped editor — Left nav and command palette filter to native-relevant sections when Native is selected
The editor opens on Brand. The preview header has a Web | Native control in the center, beside General, Guides, and Assets. The same control stays available on Overview and the other previews.
Open the Native preview, or open a design system and choose Native from the Web | Native control in the center of the preview header.
The canvas becomes an iOS or Android phone frame with your live tokens. The left preview menu hides while Native is selected. Choose Web in the same control to return.
Adjust supported tokens — colors, radius, border width, fonts, letter spacing, and disabled opacity.
Scan the QR code on the overview to open your theme in the HeroUI Native app.
Export Native CSS from the code panel when you are ready to ship. Open the panel from Native overview and Native CSS is selected by default.
When you switch to Native, unsupported web-only controls fall back to HeroUI defaults in both the phone preview and the editor:
Line height, font size, spacing, and glass blur
Cursor pointer and animations toggles
Custom accent-hover and other unsupported color variables
Custom CDN body fonts (the QR card shows a compact warning; suggested default fonts work without it)
Pro design themes (Brutalism, Glass, Mouve) — the scan card is hidden; customize a base theme instead
The code panel follows the active platform. Open it from Native overview and Native CSS is
selected by default; from Web overview, Web CSS is selected.