Skip to content
Get packs

Guide · Open source

How to use Ionic Framework: install, build and ship apps

Updated · written with AI from the project's own documentation and checked against our catalogue data

Ionic Framework is an open source toolkit of user interface components for building apps that run on iPhone, Android and the web from one codebase. It is built on Web Components and works with Angular, React and Vue. This guide explains what it is good for, how to install the Angular package with npm, and where to find the official setup docs so you can start your first project.

Ionicionic-team/ionic-framework · ★ 52.7k · MIT

Quick start

  1. 1Install Node.js and npm. Make sure Node.js and npm are installed on your computer before you start.
  2. 2Open your project folder. Move into the folder where you want your app to live.
  3. 3Install the package for your framework. Run npm install @ionic/angular for Angular, or install @ionic/react or @ionic/vue if you use those frameworks.
  4. 4Read the Quickstart. Follow the official Quickstart at ionicframework.com/docs/intro/cli to set up your first project.
  5. 5Explore an example app. Open one of the Conference App examples to see a complete Ionic app structure.
  6. 6Ask for help when stuck. File an issue on the GitHub repository or ask on the Ionic Discord or Forums.

What Ionic Framework is and who it is for

Ionic lets you build cross-platform apps with HTML, CSS and JavaScript instead of writing a separate native app for each platform. The README describes it as a toolkit for native-quality iOS, Android and Progressive Web Apps from a single codebase.

It suits web developers who want to build mobile apps with skills they already have, and teams already using Angular, React or Vue who want a shared UI toolkit. It is MIT-licensed and its source is written in TypeScript.

What you need before you install

The install method in the source is a package manager. The listed prerequisites are Node.js and npm, so install both before continuing.

  • Node.js
  • npm

Install the Ionic package for your framework

The README's install example is the Angular package. Run it inside your project folder. Ionic also publishes packages for React (@ionic/react) and Vue (@ionic/vue), and a core package (@ionic/core), which are listed in the README's package table.

npm install @ionic/angular

Start a project and learn the components

The README points to the official documentation for starting a new project and to the Quickstart guide for the Ionic CLI. Follow those pages for the exact project setup steps, since the README itself does not list them.

The Ionic Conference App is a full featured example app available for Angular, React and Vue. It is a useful reference for seeing how a complete app is organised.

  • Official documentation: ionicframework.com/docs
  • Quickstart for the Ionic CLI: ionicframework.com/docs/intro/cli
  • Conference App examples for Angular, React and Vue, linked from the README

Upgrade or work with an older Ionic version

The README links migration guides from v3 to v4, v4 to v5, v5 to v6, v6 to v7 and v7 to v8. Ionic 2 and 3 moved to the ionic-v3 repository, and Ionic 1 moved to ionic-v1. This repository covers current versions, so older apps should be worked on in their own repositories.

Get help and contribute

If you run into problems, the README asks you to file an issue on the GitHub repository. Community help is available on the Ionic Discord and Forums. Contributors should read the CONTRIBUTING guide and look at issues labelled help wanted.

What people use it for

  • Building an app that runs on iPhone and Android from one HTML, CSS and JavaScript codebase.
  • Making a Progressive Web App that runs in the browser alongside a mobile version.
  • Adding a shared UI toolkit to an existing Angular, React or Vue project.
  • Learning mobile app structure from the Ionic Conference App examples.

Frequently asked questions

How do I install Ionic Framework?

The README's install example uses npm. For Angular, run npm install @ionic/angular inside your project. Node.js and npm are the listed prerequisites.

What are the requirements for Ionic Framework?

The source lists Node.js and npm as prerequisites. You also need a frontend framework choice: the README highlights Angular, React and Vue integrations.

Is Ionic Framework free?

Ionic Framework is released under the MIT license, as stated in the README and the license badge. Check the LICENSE file in the repository for the full terms.

Does Ionic work with React and Vue as well as Angular?

Yes. The README lists @ionic/react and @ionic/vue packages alongside @ionic/angular, and mentions support for all three frameworks.

What are the alternatives to Ionic Framework?

Comparable projects include React Native, Flutter, Framework7 and Quasar Framework. Pick based on whether you want to use web skills, which the README emphasises, or a different approach.

Where do I get help if my Ionic app breaks?

File an issue on the GitHub repository, or ask on the official Ionic Discord or Forums linked from the README.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Ionic Framework suits web developers and teams using Angular, React or Vue who want one codebase for iOS, Android and the web under an MIT licence. If you need deep, direct access to the newest platform-specific native APIs, or you are maintaining Ionic 1, 2 or 3 apps, look at other options or the separate legacy repositories.

Install options & downloads