Ionic Framework - The Cross-Platform App Development Leader
Performant
Built to be fast by default—with hardware accelerated transitions, and touch-optimized gestures.
Cross-platform
Create stunning, flexible UIs for all major app platforms from a single shared codebase.
React, Angular, or Vue
Built-in support for JavaScript Frameworks, or use without any framework at all.
Light & Dark mode
Give your users light and dark theme choices so they can choose what’s most eye-friendly.
Learn the differences between hybrid and native apps. We break down all the myths and misconceptions.
Cross-platform mobile UI
Modern UI paradigms. Ready for mobile.
Slider
Supports keyboard and touch input, step interval, multiple thumb, and RTL direction
Alert
Stock with two platform modes, fine-grained focus control, accessible to screen readers
Chip
Can contain several different elements such as avatars, text, and icons
Checkbox
Allow for the display and selection of multiple options from a set of options
Toggle
Can be switched on or off by pressing or swiping and can also be checked programmatically
Input
A wrapper to the HTML input element with custom styling and additional functionality
First-Class DX
Build and preview directly in your Web Browser.
// action-sheet-example.component.ts
import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular';
@Component({
selector: 'action-sheet-example',
templateUrl: 'action-sheet-example.component.html',
styleUrls: ['./action-sheet-example.component.css'],
})
export class ActionSheetExample {
constructor(private actionSheetController: ActionSheetController) {}
async presentActionSheet() {
const actionSheet = await this.actionSheetController.create({
header: 'Albums',
cssClass: 'my-custom-class',
buttons: [{
text: 'Delete',
role: 'destructive',
icon: 'trash',
id: 'delete-button',
data: {
type: 'delete'
},
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
icon: 'share',
data: 10,
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
icon: 'caret-forward-circle',
data: 'Data value',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
icon: 'heart',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]
});
await actionSheet.present();
const { role, data } = await actionSheet.onDidDismiss();
console.log('onDidDismiss resolved with role and data', role, data);
}
}
<!-- action-sheet-example.component.html -->
<ion-button (click)="presentActionSheet()">Show Action Sheet</ion-button>
A powerful CLI
Create, build, test, and deploy your app with the Ionic CLI. You can even use your favorite JS framework’s CLI.
Enhanced editor tooling
The Ionic VS Code Extension can help follow best practices and perform common tasks from within your editor
On-Device Hot Refresh
Speed up your process by developing right on device and making use of Hot Refresh to see your changes applied instantly.
JS Agnostic
Use the JavaScript tech you prefer.
We don’t make assumptions about the JS Frameworks you prefer to build with. That’s why we engineered Ionic to integrate seamlessly with all best frontend frameworks, including Angular, React, Vue, or even no framework.
Get started:
Performance obsessed
Build apps that are fast by default.
Ionic is built to perform fast on the all of the latest mobile devices. Build apps with a small footprint and built-in best practices like hardware accelerated transitions, touch-optimized gestures, pre-rendering, and more.
Start building →
Seemless native integration
Connect to native when you need it.
Access full native device functionality with JavaScript. Choose from a library of native device plugins for Camera, Maps, Geolocation, Bluetooth, and more. Dive into the full native SDKs at any time—there’s no limit.
Write once. Run anywhere.
Deploy your Ionic apps directly to iOS and Android app stores using the Capacitor bridge and cross-platform plugin APIs.
Custom plugin development
Creating custom native experiences is easy with a simple Plugin API for Swift on iOS, Java on Android, and JavaScript for the web.
Build & deploy in the cloud
Generate native builds, push live app updates, publish to the app stores, and automate the whole process with Ionic Appflow.
Infinitely Customizable
UIs that feel at home wherever they are deployed.
Start with pre-built iOS and Material Design themes that use Adaptive Styling to display correctly on the platforms they’re rendered on, or easily tailor the components and create custom UIs that match your brand.
Ready to dive in?
Here’s how to get started building apps with Ionic Framework