Ionic Tinder UI 2020 (Ionic 4)
Created on Dec 08, 2019
Framework Ionic 4
Category Theme


Tinder needs no introduction. This is my favorite theme of all time. Recently I noticed that Tinder has been probably running A/B testing for their new tabbed view UI. I just love it. I create an Ionic 4 theme out of it!

I'm an UI/UX lover. I see nice UI, I clone. That's all!

I always take it serious to keep the code quality high, with clean and self-explained code.


Download APK to preview the theme:

enter image description here tinder-ui-2020_demo.apk

Watch on Youtube

See how it works on Youtube:

Happy prototyping!


Note: All updates are on Ionic 4

Last updated: Dec 9 2019


  • First version


  1. Welcome
  2. Explore (Swiping) - now with Taptic vibration feedback
  3. Matched
  4. Me
  5. Settings
  6. Profile
  7. Profile Edit
  8. Top picks
  9. Messaging
  10. Feed
  11. Chat ( including Giphy-4 plugin for FREE! )

All, available in Dark Mode!

Run locally

1.Install Ionic environment

$ npm install -g cordova
$ npm install -g ionic@5.4.1

2.After purchasing, download the zip file containing the entire demo app and unzip

3.Go inside the extracted folder

4.Install all dependencies

$ npm install

5.Start local server

$ ionic serve

6.Your default browser should now automatically open the template


1.Modify the default theme colors to match Tinder's colors in src/sass/variables.override.scss

:root {
  /** primary **/
  --ion-color-primary: #fd5068;
  --ion-color-primary-rgb: 253,80,104;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 0,0,0;
  --ion-color-primary-shade: #df465c;
  --ion-color-primary-tint: #fd6277;

2.I personally like the look on iOS so I forced the theme to iOS mode. You can config that to suit your need

# in src/app/app.module.ts
      mode: 'ios',
      backButtonText: '',
  1. Dependencies
npm install --save angular2-swing lodash
  1. Fix angular-2-swing
# polyfills.ts
 (window as any).global = window;


If you need technical support or have any questions, don't hesitate to send me a message:



[PROMO] Ionic 3 Bundle: 6 in 1

Proudly introduce the best of my Ionic 3 products: 3 themes + 3 plugins in Studio Pack #2 now on sale with promotion code 19SPEED. Please click the button below for more information.

Purchase Externally


More Like This