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.

Start building →

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.

Read the free eBook →

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 →

See all →

// 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:

ionic/vue

ionic/react

ionic/angular

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.

iOS

Android

Custom

Mode

Cluster image of enterprise customer logos and developers working

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.

Explore the Community →Learn about Ionic for Enterprise →

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

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!

Marius Bolik

@MariusBolik

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.

Danny Redfern

@redders66c

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

Maximillian

@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.