santoshshinde2012/ionic-react-ui-examples-collections.md

## ionic-react-ui-examples-collections.md

      
    Raw
  

              ionic-react-ui-examples-collections.md
            
          
    Ionic React UI Examples


Switch Tab Bar


An animated switching tab bar
Included in this Ionic React Template/UI

Ionic Animations
Simple transition
Sleek style


Source Code - https://github.com/alanmontgomery/ionic-react-switch-tabs
Demo - https://ionic-react-switch-tabs.netlify.app/


Poll App UI


A poll app with social sharing
Included in this Ionic React Template/UI

View Polls, View Poll, Add Poll
Vote for answer
View results / percent / counts
Social sharing / copy to clipboard
Dynamic color scheme
State management with Pullstate
Custom animations
SASS Modules & Ionic CSS utilities


Source Code - https://github.com/alanmontgomery/ionic-react-poll-app
Demo - https://ionic-react-poll-app.netlify.app/page/view


WhatsApp UI Clone


A clone of the WhatsApp UI (IOS, dark mode)
Included in this Ionic React Template/UI

Status, Settings, Starred Messages, Chats, View Chat, View Contacts, Calls pages
Reply-To in chat message using Ionic Animations and gestures (both swipe and long press)
Star messages and view them in starred from settings
Notification badges (on chat list)
Read Receipts of chats
Notification counts
Send message
Camera functionality in chat to send photo (using CapacitorJS)
Gallery functionality in chat to send image from gallery
State management with Pullstate
Custom animations
SASS Modules & Ionic CSS utilities


Source Code - https://github.com/alanmontgomery/ionic-react-whatsapp-clone
Demo - https://ionic-react-whatsapp-clone.netlify.app/tabs/chats


Onboarding UI


An effective way to welcome your users
Included in this Ionic React Template/UI

Programmatically control IonSlides
Show/Hide based on first/last slide
CSS modules & Ionic CSS utilities


Source Code - https://github.com/alanmontgomery/ionic-react-onboarding-ui
Demo - https://ionic-react-onboarding-ui.netlify.app/home


Add To Cart


Add to cart component with animation
Included in this Ionic React Template/UI

Ionic Animations
Specify color of button (animation color too)
Specify Icon or text for 'add to cart' button
Specify a custom click
CSS modules & Ionic CSS utilities


Source Code - https://github.com/alanmontgomery/ionic-react-add-to-cart
Demo - https://ionic-react-add-to-cart.netlify.app/home


Profile Dashboard UI


A profile dashboard style UI
Included in this Ionic React Template/UI

UI Only
Modern, stylish profile dashboard UI
Custom style header/toolbar
Background pattern in toolbar
ASS Modules & Ionic CSS utilities


Source Code - https://github.com/alanmontgomery/ionic-react-profile-dashboard-ui
Demo - https://ionic-react-profile-dashboard-ui.netlify.app/home


Drawing Canvas App


A drawing canvas app with editable options
Included in this Ionic React Template/UI

Drawable canva (react-canvas-draw)
Ability to change color via swatch (react-color)
Change brush/pencil size
Undo last action
Clear all
CSS Modules & Ionic CSS utilities


Source Code - https://github.com/alanmontgomery/ionic-react-drawing-canvas
Demo - https://ionic-react-drawing-canvas.netlify.app/home


Kanban project board


A kanban style project board with list view
Included in this Ionic React Template/UI

Board / List View achieved with IonSlides and IonReorder
Works on Desktop
Multiple Categories / Types
State management with Pullstate
Custom animations
Add Items, Move Items
SASS Modules & Ionic CSS utilities


Source Code - https://github.com/alanmontgomery/ionic-kanban-board
Demo - https://ionic-kanban-board.netlify.app/page/kanban


Fast Food Ordering App


A fast food ordering app UI with features
Included in this Ionic React Template/UI

Data fetching from JSON files
Color co-ordinated pages
Global state management with Pullstate
Custom animations
Fully functional add-to-cart and add-to-favourites
Total calculation in checkout
Ability to remove from cart
Category, Foods, Single product, Cart, Favourites pages
Similar or 'related' foods
Use of stock Ionic components
CSS Modules
Ionic CSS utilities


Source Code - https://github.com/alanmontgomery/ionic-fast-food-app
Demo - https://ionic-fast-food-app.netlify.app/home


Movie App UI


An example of a movie app with search
Included in this Ionic React Template/UI

Custom PWA install button prompt through service worker
Custom Algolia Search widgets
Custom animations
SASS Modules
Ionic CSS utilities
Infinite Scroll
Youtube Search


Source Code - https://github.com/alanmontgomery/ionic-react-movie-app-with-algolia
Demo - https://movies-algolia.vercel.app/home


Theme Switcher


Implementation of dynamic themes
Included in this Ionic React Template/UI

Perfect if your customers have a brand
Utilising Ionic CSS variables
API fetch (dummy JSON)
Examples of how stock components look
6 example themes to demonstrate
Low-code


Source Code - https://github.com/alanmontgomery/ionic-react-theme-switcher
Demo - https://ionic-react-theme-switcher.netlify.app/info


Notes app UI


A stylish, functional notes app
Included in this Ionic React Template/UI

Global state management with Pullstate
Custom animations
Custom inputs, cards and slides
Fully functional add note, complete note
Categories, color coded
Use of stock Ionic components
SASS Modules
Ionic CSS utilities


Source Code - https://github.com/alanmontgomery/ionic-react-notes
Demo - https://ionic-react-notes-app.netlify.app/


Calculator UI


A fully functional calculator
Included in this Ionic React Template/UI

Fully functional Calculator
Custom buttons
History of calculations
Animations on button clicks
Automatic calculation
Use of stock Ionic components
CSS Modules
Ionic CSS utilities


Source Code - https://github.com/alanmontgomery/ionic-react-calculator
Demo - https://ionic-react-calculator.netlify.app/home


Floating tab bar


A floating tab bar component
Included in this Ionic React Template/UI

Floating tab bar
Separated CSS included for floating tab bar
3 tabs from tabs starter project


Source Code - https://github.com/alanmontgomery/ionic-floating-tabs
Demo - https://ionic-floating-tabs.netlify.app/tab1


Login/Signup & Form Validation


Includes generic forms and validation
Included in this Ionic React Template/UI

Custom Hooks
Generic form building
Generic form validation
Error messages
Welcome/Login/Signup pages
Animations
SASS Modules
Ionic CSS utilities


Source Code - https://github.com/alanmontgomery/ionic-react-login
Demo - https://ionic-react-login.netlify.app/home


Coffee ordering app


A custom app for orders
Included in this Ionic React Template/UI

Global state management with Pullstate
Dynamic search
Custom animations
Custom toolbar
Custom Icons
Fully functional add-to-cart and add-to-favourites
Total calculation in checkout
Ability to remove from cart
Home, View full range, Single coffee view, Cart, Favourites pages
Use of stock Ionic components
CSS Modules
Ionic CSS utilities


Source Code - https://github.com/alanmontgomery/ionic-ordering-app
Demo - https://ionic-ordering-app.netlify.app/tabs/home


Custom Item List


A custom, creative item list with features
Included in this Ionic React Template/UI

Data fetching from MovieDB API in Movies page
Infinite scroll included for movie list and search
Custom animations
Custom Toolbar and Item
Removing an Item
Dynamic search list
Use of stock Ionic components
SASS Modules
Ionic CSS utilities


Source Code - https://github.com/alanmontgomery/ionic-react-item-list
Demo - https://ionic-react-item-list.netlify.app/home


Instagram UI Clone


A clone of the Instagram feed and profiles
Included in this Ionic React Template/UI

Global state management with Pullstate
Custom animations
Instagram Feed UI / Profile UI's
Ability to 'like' a post, with animation of heart
Use of stock Ionic components
SASS Modules
Ionic CSS utilities


Source Code - https://github.com/alanmontgomery/ionic-instagram-clone
Demo - https://ionic-instagram-clone.netlify.app/home


Banking App UI


A creative, custom banking example
Included in this Ionic React Template/UI

Global state management with Pullstate
Custom animations
Custom configurable CSS for Credit Card
Ability to add a card and view transactions
Account, Home (Cards), and Add Card pages
Use of stock Ionic components
CSS Modules
Ionic CSS utilities
No validation included on forms


Source Code - https://github.com/alanmontgomery/ionic-banking-ui
Demo - https://ionic-banking.netlify.app/home


E-Commerce template


A fully functional template for e-commerce
Included in this Ionic React Template/UI

Data fetching from JSON files
Global state management with Pullstate
Custom animations
Fully functional add-to-cart and add-to-favourites
Total calculation in checkout
Infinite scroll
Ability to remove from cart
Category, Products, Single product, Cart, Favourites pages
Use of stock Ionic components
CSS Modules
Ionic CSS utilities


Source Code - https://github.com/alanmontgomery/ionic-ecommerce-example
Demo - https://ionic-ecommerce-example.netlify.app/home


Profile UI


An example of a profile UI
Included in this Ionic React Template/UI

Profile & Posts
Custom toolbar
Ionic CSS Utilities
CSS styling modules


Source Code - https://github.com/alanmontgomery/ionic-profile-example
Demo - https://ionic-profile-example.netlify.app/home


Facebook UI Clone


A clone of the facebook timeline and messenger
Included in this Ionic React Template/UI

Timeline UI
Messenger UI
Both linked together
Icons in toolbar
All stock components
Custom CSS


Source Code - https://github.com/alanmontgomery/ionic-facebook-clone
Demo - https://ionic-facebook-clone.netlify.app/timeline


Ionic Storage UI


Ionic Storage built ontop of the famous 'list' starter template
Included in this Ionic React Template/UI

Config & create
Set, get, remove, clear
Updates to objects
Retaining data


Source Code - https://github.com/alanmontgomery/ionic-storage-example
Demo - https://ionic-storage-example.netlify.app/home


Marvel Characters App


A PWA with custom install button, fetching data from API
Included in this Ionic React Template/UI

Data fetching from Marvel API
Skeleton elements for loading
Infinite Scroll to load in 20 items each threshold
Custom PWA experience with custom install button


Source Code - https://github.com/alanmontgomery/ionic-react-marvel-app
Demo - https://ionic-react-marvel-app.vercel.app/home


Two Factor Auth UI


Get creative with your UI/UX for 2FA with a custom style and animated states
Included in this Ionic React Template/UI

Custom inputs
Custom buttons
Custom CSS animations
Inputs controlled by state


Source Code - https://github.com/alanmontgomery/ionic-2fa-example
Demo - https://ionic-react-2fa.netlify.app/home


Custom tabs/side menu


Configurable, multiple side menu, custom tabs and more
Included in this Ionic React Template/UI

Custom page
Custom tabs with tab builder
Configurable side menu with Context API
Multiple side menus per page
Sub pages and routes
Lists with data
Dynamic search example


Source Code - https://github.com/alanmontgomery/ionic-react-tabs-menus-custom
Demo - https://ionic-react-tabs-menus-custom.netlify.app/tabs/tab1