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.
Try the Ionic 9 demo · Try the Ionic 8 demo
@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:
| 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.
Both packages support Ionic 8.8.1 or later within Ionic 8 or 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.
Release from a clean, up-to-date main with npm run release. Request a PR beta with /beta. See the workflows for CI and release implementation.
A partially published versioned release requires a new shared version: npm versions cannot be overwritten, and this release workflow does not resume partial publication.