Ionic Theme and Capacitor Native UI

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

Give your Web UI the iOS look

@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

Bring supported controls into native UI

@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 currently a preview; 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.

Get started with Native UI · Supported controls

The same Library screen with Native UI off and on, captured while dragging the selected tab:

Choose what your app needs

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 only a vertical rail to an Ionic app	Vertical Bars 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.

Explore further

• Maintainers: release both packages · CI and test reports.

• iPhone Duo layout · 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.