Building Your UI
Capacitor apps are web apps at the core. But it takes a lot more than just wrapping a website to deliver a great native-quality mobile app.
Today, teams have a variety of options for their app UI. Let's explore some of the most popular options.
Ionic Framework
Ionic Framework is a mobile-focused UI kit and set of utilities that enable web developers using Capacitor to get a native-quality app experience that follows platform conventions. Ionic Framework is created by the same company that makes Capacitor and is designed specifically with Capacitor in mind.
Today, Ionic Framework is our recommended UI framework for Capacitor, because we believe it will help teams achieve the highest quality native app experience. However, it is not required to use it in your Capacitor apps.
Ionic Framework comes with native-quality transitions and routing for Angular, React, and Vue with deep integration into the most popular routing solution in each framework. Additionally, Ionic comes with powerful components like Modals, Menus, Lists along with powerful item features like Sliding Items, Form inputs, Datetime pickers, Cards, Tabs, iOS-style condensed headers, and so much more.
Ionic Framework requires Angular, React, or Vue, so will only be a fit for teams using those technologies.
To get started, view the using Capacitor with Ionic docs to learn more.
Tailwind CSS
Tailwind CSS is a popular CSS framework with companion UI template library that many Capacitor developers use to build great app experiences. Some of our favorite examples include Reflect and LogSnag.
There are also some interesting Tailwind-focused Mobile UI frameworks, such as Konsta UI.
When using Tailwind, it's important to keep in mind that Tailwind does not provide mobile-style navigation and routing primitives, so teams will need to take care to build a UX that fits platform conventions. One way to do this is to mix Tailwind with Ionic Framework, as shown in this Next.js + Tailwind + Ionic Framework + Capacitor template. Another would be to design a UX that avoids traditional forward/back navigation and instead uses tabs or modals. Finally, teams are free to build a custom navigation and routing experience if desired.
Framework7
Framework7 is a popular mobile-focused UI library created by the developer of Swiper, a powerful mobile touch slider library.
Quasar
Quasar is a Vue.js framework with mobile-focused components and official support for Capacitor.
Material UI
Material UI is a popular React-focused library implementing the Material Design guidelines.
Roll your own
If you already have an existing UI kit or would like to implement your own, we recommend reviewing Ionic Framework and the other options presented here for inspiration. Capacitor provides a blank slate to build your dream, but if you choose to roll your own UI you are responsible for building a great experience that users expect. This can be challenging to do on top of building your app, so we generally recommend this only for very advanced teams or for web apps that are already mobile-optimized.