Ionic 3 UI Theme/Template App - Material Design - Yellow Dark

• 45+ functional screens
• Fully responsive
• Build with mega-powerfull Sass
• Firebase backend
• Push notifications
• MailChimp integration and much more!

Ionic 3 UI theme is a premium multipurpose mobile app template that has more than 45 Material design HTML5 layouts, and will save your hours of coding with its predefined functions suitable for both Android and iOS apps.

You don’t have to break your head and build HTML5 mobile app from scratch because we did it for you and created a theme that is based on Ionic 3 framework and will give you all the main functions such as list views, parallax effect sections, galleries, login and register forms, splash screens, search bars and much more. In our Ionic 3 /Angular 4 UI components we expanded default Ionic features and functionalities and added them Material Design polishing.

In other words, our Ionic 3 UI mobile app template with its modern Material design is suitable for development of almost any app you can find today on Google Play or App store. Not only that, but its intuitive approach lets you choose functions that you need and combine hundreds of HTML5 UI components by your wish. You can also easily change the design and all app screens in one file and adjust it to your brand or client.

This way you can combine layouts and functions that will best suit your users and create mobile app UI that is especially tailored for your specific needs.

To see the live demo of all components, go to our Ionic 3 Theme Preview page on Codecanyon, or download the demo app from Playstore.

Try it for free

To see how it works go to our Live Preview. There you can test all screens with their functionalities. Also check tablet version to see how we set up responsive screens.


List of all mobile app components available in Ionic 3 UI Theme

Building mobile apps with Ionic 3 has never been easier thanks to all the functionalities we’ve incorporated in our mobile app template. Here’s the full list (you can learn more by clicking on the desired component):

  • List Views (4 types, 12 layouts)
  • Parallax Effect (4 layouts)
  • Left menu (1 layout)
  • Login & Register (2+2 layouts)
  • Image Gallery (4 layouts)
  • Google Maps (3 layouts)
  • Scanner (1 layout)
  • Check buttons (3 layouts)
  • Splash screens
  • Search bars (3 layouts)
  • Wizards (3 layouts)
  • Spinners/loaders (10 types)

For more information check out the theme documentation or our video tutorials that will show you how to import and use the template.

First things first – What’s new in version 2.2

Before we take you through a detailed tour of all of the components and mobile app features available in our Ionic 3 UI Theme here’s what’s new in our latest version – 2.2:

Fully responsive

We made the theme fully responsive through “ionic-split-pane”, which makes it usable on various mobile devices.

Google Maps

We added GMaps API which includes three new screens in our theme which can help you to easily add locations in your apps.

Form fields validation

Form fields validation will make sure that all fields are filled out properly by your users. It will alert them if the information they put in is not in the correct form (phone number, email…)


With our Ionic 3 UI theme, you can now offer QR code or barcode scanning in your apps. This update also includes one new screen in our layouts.

Firebase Backend

We decided to make things even more easier for you so we added the option to change texts (content texts, header texts…) icons and images in no time without any need to go to code. With the latest version of our Ionic 3 mobile app template you can do all this over Firebase, and save hours of your time.

Push Notifications

Latest research has shown that push notifications are one of the most successful ways of connecting with your users, with some companies managing to get over 40% click-through rate. Our UI theme lets you send push notification to your users effortlessly, over Firebase.

Google Analytics

One of the best ways to adapt to your users is to track their behavior and find out how they interact with your app. Google Analytics is the best tool for this because it offers in-depth information about every single thing a user does while using your app. We’ve set up Google Analytics to every screen so no click is lost.

Mailchimp Integration
E-mail marketing is still considered as one of highly successful ways of engaging your users and promoting your products. Ionic 3 UI Theme offers easy MailChimp integration that will help you collect leads for your e-mail campaigns and track results. Just change ID of your MailChimp list and you are done.


With so many different mobile device sizes, responsiveness is one of the most important features a mobile app should have. We create all our templates so they look great on all device sizes. Ionic 3 UI mobile template includes ion-grid in some components (cards, gallery, login/register) while other can be tweaked manually to fit your needs.

Main features of Ionic 3 UI Theme

Our theme is built with SASS (Syntactically Awesome Style Sheets) – and as the name itself says: it is awesome!

Not only did we paid a lot of attention to its design and all the small details, but we made our complete theming system over one super-organized main SASS file. Here you can change and adjust almost all variables in all 45+ layouts at once which will allow you to easily customize your apps to suit your or your client’s needs and even use it to make new Ionic 3 templates.

Material design for modern mobile apps

Users love nice apps, which is why we pay so much attention to design. our Ionic 3 UI template was inspired by Google Material Design known for its more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. It fast became the most popular approach for designing mobile apps today.

Some of the main features of our design include:

SASS/CSS blend modes – We made several blend modes (black & white photo, darkening and gradients) so every image in app will looks perfect and boost aesthetic side of your app. This way, all your screens will look more professional and consistent.

CSS animations – in combination with Animate.css we produce several animated elements that will raise UX quality of your mobile app. Many UI elements have animation and/or transparency – beautiful transparent animations which are more and more popular in web development.

Unified graphic – all graphic elements can be combined infinitely. This means that even if you want to combine UI components from different themes it is possible with just few tweaks. This allows you unlimited ways of designing your apps and adjusting them to your brand or your client’s needs.

Fonts changeable in one line of code – we used web fonts (Roboto and Lato), which are the ones that Google suggests in their guidelines for mobile app development, but it is very easy to replace them if you feel so. All you have to do is change the URL to your desired web font in one line of code in main SASS file and you are done. (Note: If you plan to change font we suggest that you change it with some web fonts that have same number of font weights.)

Icons – Ionic 3 UI Theme includes a wide range of more than 800 Material Design icons from We used Fontello font to create them in scalable SVG format so you don’t have to worry about different sized PNG’s anymore. In other words, you get a lot of great looking Ionic icons.

Images – on all of the screens and layouts available in our mobile app template there are just 4 sizes of images (200×200px, 600×300px, 600×150px and 130×220px). All other used sizes are made automatically, which will save you a lot of time during your app development. Backgrounds are full HD (1920×1080px).

Colors – colors and color combinations of every Ionic 3 theme are made from Google Material Design color palette and by their guidelines. This will be helpful in making your app more noticeable on Play Store.

Functionalities that make our Ionic 3 UI Theme so good

We used world most popular hybrid app framework, Ionic 3, in the development of our mobile app template. It lets you create your mobile web app front-end fast as lightning so it’s no wonder that, to this day, more than 1.2 million mobile apps are developed using this framework.

As developers ourselves, we know how frustrating it can be to work on customizing someone else’s code which is why we made sure that all HTML5, CSS3 and SASS files are well commented for easier and quicker development and customizing.

Our template will provide you with more than 45 finished layouts, ready to use, so you can easily build your mobile application over directives. Every directive contains 1-3 HTML5 layouts that can be very easily implemented. Of course, you can customize it and create unique HTML5 mobile app. All you need to do is to provide content.

To make everything so smooth and easily customizable is one thing, but making it functional for every user, regardless of the device he/she uses is what it’s all about. That’s why we tested our template on numerous devices and OS versions.

When it comes to Android devices, every UI element and layout work on Android 4.4 and up to latest Android version. We tested it on Samsung Galaxy S7 (Android 6), Sony Xperia Z2 (Android 6), Samsung Galaxy J5 (Android 5.1), Sony M2 (Android 5.1), Samsung s4 (Android 4.4). Also, we test it on GenyMotion and everything works perfect.

As for Apple devices, everything is tested (and works great) on iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPhone 6, iPhone 6s, iPhone 6 plus and iPhone 6s plus.

Available UI components for fast and easy mobile app development

As we already mentioned, we wanted to make a multipurpose mobile app template that can easily be used for developing all types of apps you can find on Google Play and App Store. Our list contains of 10 most popular mobile app components, all of which have several different layouts. It’s up to you if you want to use all of them or select those that are usable in your app.

  • NEW – Google Maps – 3 new screen with implemented GMaps API. We included it in page About us which is very usable for business app and company presentations. Also there is page called Location details which main purpose is for restaurants or some other location based apps. And of course there is Full page screen if you want to have bigger overview of maps. Functionality as Satellite/Maps and Street View is also available.
  • NEW – QR code & Barcode scanner- Fully functional scanner with support for various types of code. There is also one themed screen for showing results of scanning. Our scanner supports: QR_CODE, DATA_MATRIX, UPC_E, UPC_A, EAN_8, EAN_13, CODE_128, CODE_39, CODE_93, CODABAR, ITF, RSS14, RSS_EXPANDED for Android. For iOS it support: QR_CODE, DATA_MATRIX, UPC_E, UPC_A, EAN_8, EAN_13, CODE_128, CODE_39, ITF.

List Views

We offer four types of List Views: Expandable (3 layouts), Drag&Drop (3 layouts), Swipe to dismiss (3 layouts), and Google Cards (3 layouts). We used some elements of Ionic 3 framework but we weren’t happy how they looked so we upgraded and polished them to be prettier and easier to work with.

All of them have their own specific effects and functionalities. Also, we added Appearance animations that can be combined with all five List Views for better look and user experience. In total, we have 12 different List Views layouts that will certainly suit all your needs. Open source project used in this components: Sticky List Header

Parallax Effect (4 layouts)

Parallax effect in mobile apps is a great way for you to combine a great looking layout or feature with high UX quality. We made a new component for Ionic 3 / Angular 2 and combined itit with Ionic 3 lists which resulted with a beautiful Material Design UI element. Open source project used: Elastic header with zoom.

Left menu (1 layouts)

We used standard Ionic left menu (or side menu) and we designed it to match our theme combining gradients and photos with SASS/CSS blend modes. This type of navigation proved itself as one of the most intuitive when it comes to mobile app development, with the highest UX feedback during testing.

Login & Register (2+2 layouts)

Most apps people use today are Login/Register based. With our 2 Login and 2 Register layouts that use small but nice letter effect with HD images in background, your Login/Register screens will completely integrate with the overall design of your app.

Image Gallery (4 layouts)

If you are developing apps that use galleries you will be pleased to know that we offer 4 different gallery and sub-gallery layouts that use a cool Ripple effect. Ionic 3 UI Theme also includes pre-made full-screen image previews so you don’t need to code them.

Check boxes (3 layouts)

We made 3 different layouts of check boxes with matching styles for every of UI layouts.

Splash screens

We also created 3 different Splash screens combined with Ken Burns effect (made from scratch by us) and several logo entrance animations. They are a great way to emphasize certain things in your app in a cool and modern way.

Search bars (3 layouts)

Search bars are a great way to make navigating through your apps a bit easier for users. They can significantly improve user experience and make your app more popular. We have 3 different layouts for search bars that can be easily and quickly implemented in your app, and fit perfectly with every Ionic 3 theme.

Wizards (3 layouts)

Wizards are probably the best way to explain all the functionalities of your app to your users and are often used when new features are added in mobile apps via updates. Our 2 different layouts of wizards will make any app usage instructions, intros or explanators look great and intuitive.

Spinners/loaders (10 types)

There are 10 types of spinners/loaders in our Ionic 3 UI theme so we are certain that you will find one that works best for you. They are all made of animated SVG’s. Open source project used in this component: SVG-Loaders

Technologies and projects used to make our mobile app theme

To be able to make all of Ionic 2/Angular 2 components in Material Design we had to use several technologies and few open source projects. In our documentation we have explained how to use this projects. Here is list what we used to bring our design to life:

SASS (Syntactically Awesome Style Sheets) – Makers of SASS call it “CSS with superpowers”. And it is! Sass boasts more features and abilities than any other CSS extension language. Also it is completely compatible with all versions of CSS.

Ionic 3 – it is open source mobile framework for developing hybrid mobile and web apps. With Ionic you can produce Android, iOS and Windows mobile apps at once. There are over 1.2 million apps created using Ionic which makes it is one of the most popular mobile frameworks out there, mostly thanks to its intuitive and easy approach to mobile apps development.

Angular 4 – Angular 4 is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly.

jQuery – jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

NgCordova – ngCordova is a collection of 70+ AngularJS extensions on top of the Cordova API that make it easy to build, test, and deploy Cordova mobile apps with AngularJS.

AnimateCSS – “Just-add-water CSS animations” made by Daniel Eden is collection of beautiful CSS animations.

Elastic header with zoom – is Ionic/Angular directive for elastic headers made by Ola Christensson.