Install from npm; see Native UI installation or theme setup. For 1.x, use the v1.2.1 guide. Bring the iOS look to your Ionic app, or add native controls to your Capacitor app while keeping Web content, routing, and application state.
@rdlabo/ionic-theme-ios27 brings Liquid Glass styling, light and dark appearances, and coordinated animations to Ionic toolbars, tabs, lists, buttons, search, and overlays. Use it on its own to style your Web UI.
Get started with the theme · Explore theme features
@rdlabo/capacitor-native-ui projects supported Ionic controls into UIKit and SwiftUI on iOS. Your existing markup supplies their labels, icons, and state; native actions flow back to your Ionic components. Page content and routing stay in the WebView.
Keep your existing Web appearance or pair it with the iOS theme. Native UI is opt-in and officially supported starting with 2.0.0; unsupported controls and browsers retain Web presentation. On Android, standard controls stay on the Web; experimental app-local extensions can render with Jetpack Compose. Your app or theme owns Web layout and styling.
How projection connects to your DOM · Ionic setup · HTML setup · Supported controls
The same Library screen with Native UI off and on, captured while dragging the selected tab:
Native UI uses the shared Native UI Engine for prepared images beneath blocking Web overlays, native restoration after dismissal, and scroll tracking. Images are noninteractive; when no usable image is available, controls retain their existing Web fallback.
Keep Native UI and the optional theme on matching 2.x versions. After updating, build your Web application, run npx cap sync, and rebuild the native application. Follow the Native UI setup guide for initialization. Native UI enables Ionic overlay support internally; applications do not need an additional Engine initializer.
| Your goal | Start here |
|---|---|
| Style your Ionic Web UI | Set up the theme |
| Render Ionic controls natively with your existing Web appearance | Set up Native UI |
| Use native buttons without Ionic | HTML setup |
| Add a vertical rail to Ionic while keeping your theme | Ionic rail setup |
| Add a vertical rail without Ionic | HTML rail setup |
| Add custom SwiftUI or Compose content | App-local extensions (experimental) |
Already using the iOS theme? Add Native UI to your theme as your next step.
The declared Ionic compatibility range remains >=8.8.1 <10; automated E2E validation targets Ionic 9. Native UI requires Capacitor 8; see its setup guide for supported iOS environments.
- Device layout and posture · Vertical Bars with an existing theme.
- Theme migration · Native UI migration.
Use standard native buttons without Ionic through the plain HTML adapter, or keep Ionic markup and enable only Vertical Bars. Both use the same native renderers.
@webview-native-ui/engine provides DOM/native placement, scroll tracking and prepared-image handoff. It is a library dependency for plugin maintainers, not a Capacitor plugin for applications. Native libraries support iOS and Android.
The theme and @rdlabo/capacitor-native-ui use the MIT license. The independent Engine repository owns its licensing and notices.
Native UI and the theme share a release version. Engine is maintained and released independently at webview-native-ui/engine. Its npm, SwiftPM and Maven versions must stay aligned when updating the pinned dependency.
Release from a clean, up-to-date main with npm run release. The command bumps the root version and creates the ios27-v… tag. The tag workflow updates the two workspace versions, verifies the pinned Engine Maven artifact, and publishes Native UI followed by the theme. Prereleases use the npm next dist-tag. See the workflows.
A partially published versioned release requires a new shared version: npm versions cannot be overwritten, and this release workflow does not resume partial publication.