Theme Builder Native

June 19, 2026

The Pro Theme Builder now supports HeroUI Native. Switch the preview platform to Native, 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.

What's New

Web + Native preview — Toggle between Web and Native preview platforms without leaving the editor
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

How it works

Open the Theme Builder and switch the preview platform to Native
Adjust supported tokens — colors, radius, border width, fonts, letter spacing, and disabled opacity
Preview the result in the in-browser phone frame (iOS or Android)
Scan the QR code to open your theme in the HeroUI Native app
Export Web CSS or Native CSS from the code panel when you are ready to ship

Supported on Native

These tokens sync between the editor preview, QR deep link, and native CSS export:

Semantic colors — accent, surfaces, foregrounds, status colors, borders, and focus
Radius and field radius
Border width and field border width
Font weights mapped to Expo Google Fonts families (15 suggested defaults)
Letter spacing
Disabled opacity
Chart palette variables (--chart-1 through --chart-5)

Not supported yet on Native

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.

Try It on Your Device

Don't have the HeroUI Native app yet? Download it below.

Download on App Store Download on Play Store