Ionic Framework
One codebase. Any platform. All with React.Vue.Angular.
Ionic Framework is an open source UI toolkit for building modern, high performance cross-platform apps from a single codebase.
Lightweight & fast
Built to be fast and efficient by default, with hardware accelerated transitions, and touch-optimized gestures.
Cross-platform UI
Create modern, flexible UIs for all major app platforms and the Web—from a single shared codebase of HTML, CSS, and JavaScript.
Framework-agnostic
Bring your favorite JavaScript Frameworks—or none at all. Build apps with Angular, React, Vue, or just plain Vanilla JS.
From startups to enterprise—the world's best teams use Ionic to build their app UIs. See how →
Learn the differences between hybrid and native. We break down all the myths and misconceptions.
Features
Everything you need to build incredible app UIs
Performant
Leverage the latest Web and JS features that perform and run fast on all of the latest mobile devices.
Cross-platform
Reach users on every platform and deploy to multiple devices from a single codebase.
React, Angular, Vue
Work with built-in support for popular JS frameworks, or use without a framework at all.
Built-in dark mode
Give your users light/dark theme choices so they can choose what’s most eye-friendly.
TypeScript Support
Ionic helps you adhere to best practices for web developers by type checking your code.
Adaptive UI
Every Ionic Framework component auto-adapts its look and feel to the platform on which it’s running.
Native-like gestures
Enable the same native gestures and behaviors that your users are accustomed to.
100+ UI components
Build with 100+ pre-designed UI components, typography, and base themes that adapt to each platform.
Tree-shakable
Automatically remove dead code when bundling multiple JavaScript files into single files.
Built-in accessibility
Get keyboard functionality and screen reader support to comply with non-visual access guidelines.
Native Performance
Optimized for mobile with hardware accelerated animations, lazy loading, and 60FPS scrolling.
Developer-friendly tooling
Create, build, and test with Ionic CLI and leverage Live Reload, deployments, and top-notch Docs.
Build and preview right in your web Browser.
Ionic Framework components work anywhere—with integrations for the latest JavaScript frameworks like React or Vue, and can run standalone in a web page with just a script tag.
Explore UI Components →// 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>
Apps that are fast. Out-of-the-box.
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 →Consistent
60 FPS
Native Scrolling
Out-of-the-box
100 %
Lighthouse PWA performance score
Down to
1.8 Sec
Average time to interactive
Up to
2 x
Faster than previous versions
Build apps with the 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 at all.
Get started:
Customize to your heart’s desire.
Ionic’s intuitive theming lets you control every pixel to easily create custom, adaptive designs that match your brand and feel great across every device or screen. You’ll have access to everything you need to nail every detail.
Developer friendly. Enterprise ready.
More than 5 Million developers in over 200 countries around the world are using Ionic to power their app development. Join the thousands of global meetups, forums, and events that makes building with Ionic so much fun.
What folks say about Ionic.
Sean Bannigan
@seanbannigan
I love building apps with Ionic and Capacitor because you can build UI that looks amazing, all with web technologies and a little plugin magic. As a user, I would never know this wasn’t a “native” app.
Angular
@angular
Angular + Ionic represent a huge percentage of App Store and Google Play downloads
Nicole Sullivan
@stubbornella
Your care and attention to detail shows in @Ionicframework components. And your commitment to interoperability with frameworks is 💯
Einfach Hans
@einfach_hans_
I'm 23 years old and already can say: @Ionicframework changed my life. I'm proud to be able to describe myself as an Ionic Expert/Senior in my young age 👍🏻
Starting playing with @Ionicframework again today. Holy shit! Things have changed in the past 4 years with Ionic. Excited to learn more and more about this awesome tool!
I refactored my cryptocurrency app in under a month using @Ionicframework & @capacitorjs.
Abimael Barea
@abimaelbarea
There are many options to build cross-platform apps. Still, the approach of @Ionicframework using web components, css variables, multi framework support, and now a straightforward integration with native code using Portals it's pretty impressive.
Steve Sanders
@StevenDSanders
One of the devs on my team added a fantastic dark mode to our new @Ionicframework app in less than a day of work.
Absolutely insane how productive you can be in Ionic! Let's just say that adding dark mode to our native iOS app took a lot longer than a day.
Why on earth did I not jump in @Ionicframework and @capacitorjs earlier?! The ease of using native plugins is outrageous.
FK - Cloud Architect
@coderonfleek
You won't totally appreciate the work that the
@ionicframework team has done until you have read the entire docs. Such an amazing tool they have built
Ionic is awesome! Building cross-platform apps has always been amazing with Ionic (and Capacitor) but Vue being Vue, it's of course super smooth and straightforward.
Glenn Nickens
@GlennNickens
I luv @Ionicframework!
Ready to dive in?
Here’s how to get started building apps with Ionic Framework