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

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

Created August 23, 2023 12:19

Star (0) You must be signed in to star a gist
Fork (0) You must be signed in to fork a gist

Select an option

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/bipoza/42832c6335f73eefc64a544036e4ad90.js"></script>
Save bipoza/42832c6335f73eefc64a544036e4ad90 to your computer and use it in GitHub Desktop.

Download ZIP

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment