The mobile SDK for the Web.

An open source mobile UI toolkit for building modern, high quality cross-platform mobile apps from a single code base in React.Vue.Angular.

Get started →
  • speedometer icon

    Performant

    Built to be fast by default—with hardware accelerated transitions, and touch-optimized gestures.

  • speedometer icon

    Cross-platform

    Create stunning, flexible UIs for all major app platforms from a single shared codebase.

  • speedometer icon

    React, Angular, or Vue

    Built-in support for JavaScript Frameworks, or use without any framework at all.

  • speedometer icon

    Light & Dark mode

    Give your users light and dark theme choices so they can choose what’s most eye-friendly.

Powering incredible app experiences at the world’s best companies

aflac logotarget logosouthwest logoh&r block logoibm logot-mobile logo
Book cover

Learn the differences between hybrid and native apps. We break down all the myths and misconceptions.

Read the free eBook →
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>
  • icon

    A powerful CLI

    Create, build, test, and deploy your app with the Ionic CLI. You can even use your favorite JS framework’s CLI.

  • icon

    Enhanced editor tooling

    The Ionic VS Code Extension can help follow best practices and perform common tasks from within your editor

  • icon

    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.

angular vue react cube
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 →
ionic performance metrics
window buttons icon
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.

  • native icon

    Write once. Run anywhere.

    Deploy your Ionic apps directly to iOS and Android app stores using the Capacitor bridge and cross-platform plugin APIs.

  • native icon

    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.

  • native icon

    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.

Android front light theme
Android front dark theme
Android back light theme
Android back dark theme
iOS front light theme
iOS front dark theme
iOS back light theme
iOS back dark theme
Custom front light theme
Custom front dark theme
Custom back light theme
Custom back dark theme
Feel the love

Powered by a growing global contributors community.

  • Sean Bannigan twitter profile image

    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.

  • Nicole Sullivan twitter profile image

    Nicole Sullivan

    @stubbornella

    Your care and attention to detail shows in @Ionicframework components. And your commitment to interoperability with frameworks is 💯

  • Abimael Barea twitter profile image

    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.

  • Einfach Hans twitter profile image

    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 👍🏻

  • Marius Bolik twitter profile image

    Marius Bolik

    @MariusBolik

    I refactored my cryptocurrency app in under a month using @Ionicframework & @capacitorjs.

  • Pato twitter profile image

    Pato

    @devpato

    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!

  • Angular twitter profile image

    Angular twitter verified checkmark

    @angular

    Angular + Ionic represent a huge percentage of App Store and Google Play downloads

  • Danny Redfern twitter profile image

    Danny Redfern

    @redders166c

    Why on earth did I not jump in @Ionicframework and @capacitorjs earlier?! The ease of using native plugins is outrageous.

  • FK - Cloud Architect twitter profile image

    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

  • Maximilian twitter profile image

    Maximilian

    @maxedapps

    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.

  • Steve Sanders twitter profile image

    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.

  • Glenn Nickens twitter profile image

    Glenn Nickens

    @GlennNickens

    I luv @Ionicframework!

  • Alex Dobsom twitter profile image

    Alex Dobsom

    @alexdobsom

    It took me 50 minutes to realize how useful is @Ionicframework for building web, android & ios with @reactjsfrom a single code source (easier than React Native and React for Web) just listening to this podcast. Just WOW 😍

  • Veni Kunche twitter profile image

    Veni Kunche

    @venikunche

    Love Ionic! Before I got the idea for Diversify Tech, I was making app templates using it.

  • Simon Grimm twitter profile image

    Simon Grimm

    @schlimmson

    Tried @useappflow for @Ionicframework apps and must admit this stuff rocks 🔥 Cloud builds, automations and direct deploy to app store and Google Play - all configured basically within a morning 😱

  • Ire Aderinokun twitter profile image

    Ire Aderinokun

    @ireaderinokun

    Guys, @Ionicframework is insaaaneee. I'm now a Mobile Developer 💅🏾

  • Adam Wathan twitter profile image

    Adam Wathan

    @adamwathan

    Been pouring over the various @Ionicframework websites this afternoon just because they're so beautifully designed 😍

  • Sarah Drasner twitter profile image

    Sarah Drasner

    @sarah_edo

    Finally used Ionic to build an app, and wow- this is so much fun. Building with Vue, (they have React and Angular too) and it deploys on Web, iOS, and Android? I’m having delusions of app grandeur.

  • Parham twitter profile image

    Parham

    @_pazel

    When a mobile app is successful, often the client asks us to build a web version so it's more accessible. Building with @Ionicframework and @capacitorjs has saved our clients and us a lot of time and money by enabling us to transform into a webapp with minimal effort.

  • vjeux twitter profile image

    vjeux

    @Vjeux

    Super excited about Ionic React! I’ve always dreamed of a “ruby on rails” equivalent for React where all the environment is setup to be productive right away.

  • Realm twitter profile image

    Realm twitter verified checkmark

    @realm

    Start with an @Ionicframework React web application and run it on #iOS and #Android. 📲

    #Ionic and @capacitorjs make it super easy to run your Realm-powered Ionic apps everywhere! 🌏

  • Ben twitter profile image

    Ben

    @derbenoo

    How do you build a fully functional chat on both Android and iOS with 2 devs (shout-out to @mitschmidt) in just 4 days? 😱

    Yes you guessed it: @capacitorjs + @angular + @Ionicframework + @storybookjs

  • Matt Starr twitter profile image

    Matt Starr

    @mb_starr

    shoutout to @Ionicframework here for being part of the sane solution for 99.9% of the people. Thank you sir!

  • Joeycrack.Net twitter profile image

    Joeycrack.Net

    @Joeycrack_Net

    The @Ionicframework and @angular framework is total for web/mobile development. I mean I was just building for android and ios and suddenly I decided I want a pwa and it didn't take me up to 5mins to create one with same codebase who does that? 😂🤣😂🤣😂 This stack is the shiit

  • Travis Ryan twitter profile image

    Travis Ryan

    @darkunderlord

    I am absolutely blown away by how awesome The @Ionicframework Appflow works so well. This is a game changer for me as a developer.

  • Brandon Roberts 🥑 twitter profile image

    Brandon Roberts 🥑

    @brandontroberts

    Building games with Ionic, Phaser, Capacitor, and NgRx?! 🔥🔥🔥

15M

Monthly npm installs

49k

Stars on GitHub

123k

Followers on Twitter

100+

Community meetups

Ionic has a vibrant, growing community. Join us →