Ionic Framework Design

When to Use

TRIGGER when:

• Writing or reviewing Ion* / ion-* components in a Capacitor app
• Theming: --ion-color-*, dark mode, high contrast, per-platform styles
• iOS vs Material Design mode looks wrong, or mode overrides misbehave
• Upgrading Ionic 7/8 -> 9, or errors after npm i @ionic/*@latest
• Choosing Ionic vs another UI kit for a new Capacitor app

Do not use:

• Konsta UI components: konsta-ui
• Tailwind v4 install / config: tailwind-capacitor
• Notch / system bar padding outside Ionic: safe-area-handling
• Keyboard covering inputs: capacitor-keyboard (Ionic apps use resize: 'ionic')
• Leaving Appflow / Ionic Enterprise plugins: ionic-appflow-migration, ionic-enterprise-sdk-migration

Versions (October 2026)