Overview / Guide
Use native UI
Project your Web controls into native UI while your app keeps its state, routes and handlers.
The Capacitor plugin offers three capabilities: use its built-in native UI (currently iOS), obtain Dynamic Color (currently Android), or implement your own native UI. Standard setup combines the first two; this chapter covers the built-in controls.
Ordinary controls and Vertical Bars are enabled by default. The default installation also connects device-layout notifications. After installation, adjust only the controls or behavior your application needs.
Keep application behavior in the Web layer
The Web element describes the control’s state and actions. Native UI presents supported controls and sends interactions back to the existing Web handlers. Keep route changes, validation and application state in those handlers; do not implement a second copy in native code.
Choose what you already have
Use standard setup for the complete Ionic experience. When you only need native controls, choose one of the integrations below: the iOS 27 theme, your existing Web theme, or HTML without Ionic. These are alternatives for the same capability, not three steps to perform in order. Keep unsupported controls usable on the Web and verify their existing event handlers.
Choose a Native UI integration
| Ionic setup | Use the iOS 27 theme |
|---|---|
| Existing-theme setup | Keep an existing Web theme |
| HTML setup | Use HTML without Ionic |