Ionic Framework

Ionic's components are web components that change their appearance at runtime to match the platform they run on: iOS conventions on an iPhone, Material Design on Android. Wrappers exist for React, Vue and Angular, and Capacitor packages the result as a real native app.

At a glance

Install	npm install @ionic/react (or -vue, -angular)
Foundation	web components under every wrapper
Adaptive UI	mode switches between iOS and Material at runtime
Native packaging	Capacitor, from the same team
MCP server	not published
License	MIT, with paid Appflow cloud services

Install

npm install @ionic/react @ionic/react-router

import { IonButton, IonPage, IonContent } from '@ionic/react'

<IonPage>
  <IonContent>
    <IonButton expand="block" color="primary">Continue</IonButton>
  </IonContent>
</IonPage>

Adaptive rendering is the differentiator

The same component renders a rounded iOS-style alert on iPhone and a Material dialog on Android, including transitions and back-gesture behaviour. Building that yourself is weeks of work that users notice only when you get it wrong.

Free versus paid

The framework and Capacitor are MIT. Appflow, the hosted build, live-update and app store deployment service, is a paid product, and the enterprise tier adds supported native plugins. You can ship entirely on the free side, but the commercial pull is real once you are managing release pipelines.

Choose it if

• You are shipping a mobile app from web technology and want it to feel native.
• You want one codebase across iOS, Android and the web.

Look elsewhere if

• You are building for desktop browsers only. This is heavy for that job.
• You want a neutral design language rather than iOS and Material conventions.