Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/zidniryi/pretty-ui-resources

A collection of Resource Templates and UI for Frontend and Mobile that are ready to use
https://github.com/zidniryi/pretty-ui-resources

angular frontend hacktoberfest hacktoberfest-accepted hacktoberfest2022 hacktoberfest2023-accepted hactoberfest2023 mobile-app react-native reactjs resources swiftui ui-components uikit web

Last synced: 5 months ago
JSON representation

A collection of Resource Templates and UI for Frontend and Mobile that are ready to use

Awesome Lists containing this project

README 

          
# Collection of Templates And UI for Web and Mobile



![Logo](https://raw.githubusercontent.com/zidniryi/pretty-ui-resources/main/assets/pretty_ui.png)



## Intro



A collection of Resource Templates and UI for Frontend and Mobile that are ready to use



## How To Contribute



Please read [CONTRIBUTING](https://github.com/zidniryi/pretty-ui-resources/blob/main/docs/CONTRIBUTING.md "CONTRIBUTING"). If you're new to GitHub, welcome! Remember to abide by our adapted from Contributor Covenant



## Resources



### Android (Kotlin)



- [Android Button that morphs into a loading progress bar.](https://github.com/leandroBorgesFerreira/LoadingButtonAndroid "Android Button that morphs into a loading progress bar.")

- [Android-FilePicker Photopicker and document picker for android](https://github.com/DroidNinja/Android-FilePicke "Android-FilePicker - Photopicker and document picker for android")

- [Android Search View based on Material design guidelines.](https://github.com/Mauker1/MaterialSearchView "Android Search View based on Material design guidelines.")

- [Android layout that simulates physics using JBox2D](https://github.com/Jawnnypoo/PhysicsLayout "Android layout that simulates physics using JBox2D")

- [CircleMenu is a simple, elegant menu with a circular layout.](https://github.com/ImangazalievM/CircleMenu "CircleMenu is a simple, elegant menu with a circular layout.")

- [CodeView-Android: Display code with syntax highlighting ](https://github.com/kbiakov/CodeView-Android "CodeView-Android: Display code with syntax highlighting ")

- [Easy, flexible and powerful Swipe Layout for Android](https://androidrepo.com/repo/chthai64-SwipeRevealLayout-android-layout "Easy, flexible and powerful Swipe Layout for Android")

- [EasyImage - Library for picking pictures from gallery or camera](https://github.com/jkwiecien/EasyImage "EasyImage - Library for picking pictures from gallery or camera")

- [Easily celebrate little and big moments in your app with this lightweight confetti library!](https://github.com/DanielMartinus/Konfetti "Easily celebrate little and big moments in your app with this lightweight confetti library!")

- [Flexbox For Android](https://github.com/google/flexbox-layout "Flexbox For Android")

- [Instagram-Clone-Kotlin](https://github.com/alexbezhan/Instagram-Clone-Kotlin "Instagram-Clone-Kotlin")

- [Landscapist Jetpack Compose image loading library](https://github.com/skydoves/landscapist)

- [Money Tracker UI with Kotlin](https://github.com/gandarain/money_track_app "Money Tracker UI with Kotlin")

- [Material Chip view. Can be used as tags for categories, contacts or creating text clouds](https://github.com/robertlevonyan/materialChipView "Material Chip view. Can be used as tags for categories, contacts or creating text clouds")

- [Material Calendar View for Android](https://github.com/Applandeo/Material-Calendar-View "Material Calendar View for Android")

- [RecyclerView Animators](https://github.com/wasabeef/recyclerview-animators "RecyclerView Animators")

- [Simple Carousel built with Android MotionLayout](https://github.com/faob-dev/MotionLayoutCarousel "Simple Carousel built with Android MotionLayout")

- [Switcher Android implementation of switch animation](https://github.com/bitvale/Switcher "Switcher Android implementation of switch animation")

- [ViewPager cards inspired by Duolingo](https://github.com/rubensousa/ViewPagerCards)

- [WordPress-Android](https://github.com/wordpress-mobile/WordPress-Android "WordPress-Android")

- [Github User](https://github.com/gandarain/github-user)

- [Learning Kotlin](https://github.com/gandarain/Learn-Kotlin)

- [Learning XML](https://github.com/gandarain/learn_xml)

- [EditText in RecyclerView](https://github.com/didik-maulana/edit-text-recyclerview)

- [ImageCompression](https://github.com/didik-maulana/ImageCompression)

- [Moflix Apps](https://github.com/didik-maulana/moflix-apps)

- [Story App](https://github.com/gandarain/Story-App)

- [JetCoffee App](https://github.com/gandarain/belajar-membuat-aplikasi-android-dengan-jetpack-compose/tree/main/3.%20layout-pada-compose/3.3%20JetCoffee)



### Android (Java)



- [Android Profile UI Java XML](https://github.com/karunstha/android-profile-ui "Android Profile UI Java XML")

- [Andorid Java UI Profile XML](https://github.com/theindianappguy/SampleProfileUi)

- [Login UI Cool Java XML](https://github.com/sachintha00/Android-Login-UI)

- [Mini android game written with java and using libgdx framework](https://github.com/boctavian96/SquareDodger)

- [Sport Apps](https://github.com/didik-maulana/SportApps)



### Swift (Swift UI)



- [Contacts-SwiftUI is a contacts app built using SwiftUI! Scroll through a dynamic list of contacts](https://github.com/bobbyconti/Contacts-SwiftUI "Contacts-SwiftUI is a contacts app built using SwiftUI! Scroll through a dynamic list of contacts")

- [MovieSwiftUI is an application that uses the MovieDB API and is built with SwiftUI.](https://github.com/Dimillian/MovieSwiftUI "MovieSwiftUI is an application that uses the MovieDB API and is built with SwiftUI.")

- [SwiftUI Animation Gallery](http:/https://github.com/amosgyamfi/swiftui-animation-gallery/ "SwiftUI Animation Gallery")

- [SwiftUI Movie Apps](https://github.com/didik-maulana/SwiftUIMovieApps)

- [SwiftUI PixaGame Apps](https://github.com/didik-maulana/pixa-game-apps)



### React Native



- [Airbnb React Native Clone Project](https://github.com/imandyie/react-native-airbnb-clone "Airbnb React Native Clone Project")

- [Cryptograph an React Native App Graph for Crypto](https://github.com/zidniryi/cryptograph "Cryptograph an React Native App Graph for Crypto")

- [Gifted Chat The most complete chat UI for React Native & Web](https://github.com/FaridSafi/react-native-gifted-chat "Gifted Chat The most complete chat UI for React Native & Web")

- [Gmail Clone React Native](https://github.com/JaiParakh/gmail-clone "Gmail Clone React Native")

- [Instagram Clone React Native ](https://github.com/iamvucms/react-native-instagram-clone "React Native Instagram Clone")

- [Movies App React Native](https://github.com/uwemneku/Movies-App-React-Native "Movies App React Native")

- [NativeBase Universal Components for React & React Native](https://nativebase.io/ "NativeBase Universal Components for React & React Native")

- [React Native - Bidirectional Infinite Smooth Scroll](https://github.com/GetStream/react-native-bidirectional-infinite-scroll "React Native - Bidirectional Infinite Smooth Scroll")

- [React Native Elements Cross Platform React Native UI toolkit](https://reactnativeelements.com/ "React Native Elements Cross Platform React Native UI toolkit")

- [React-native-parallax-scroll](https://github.com/monterosalondon/react-native-parallax-scroll "React-native-parallax-scroll")

- [React Native Vector Icons Easy to extend, style and integrate into your project](https://github.com/oblador/react-native-vector-icons "React Native Vector Icons Easy to extend, style and integrate into your project")

- [React Native Modal](https://github.com/react-native-modal/react-native-modal "react-native-modal")

- [React Native OCR Scanner Card2Contact](https://medium.com/alameda-dev/react-native-ocr-scanner-card2contact-6ed7b1e5f7c7 "React Native OCR Scanner Card2Contact")

- [ React Native Responsive Dimensions](https://github.com/react-native-toolkit/react-native-responsive-dimensions " React Native Responsive Dimensions")

- [ React Native display and animate any Wavefront .OBJ 3D object.](https://github.com/rastapasta/react-native-gl-model-view " React Native display and animate any Wavefront .OBJ 3D object.")

- [Shope app is a native react project for an online store](https://github.com/zidniryi/shopeApp "Shope app is a native react project for an online store")

- [Seats layout for bus booking](https://github.com/Mindinventory/react-native-bus-seat-layout "Seats layout for bus booking")

- [Tinder React Native Deck Swiper](https://github.com/alexbrillant/react-native-deck-swiper "Tinder React Native Deck Swiper")

- [WhatsApp Clone Using React Native](https://github.com/filipenatanael/whatsapp-clone-react-native "WhatsApp Clone Using React Native")

- [React Native Starter with TypeScript](https://github.com/gandarain/rn_starter "React Native Starter with TypeScript")

- [e-commerce React Native Example](https://github.com/gandarain/Ecommerce_RN "e-commerce React Native Example")

- [RN Cart App with Async Storage](https://github.com/gandarain/Ecommerce_RN "RN Cart App with Async Storage")

- [Tamagui. A total UI kit for Native and Web. Composable components, themeable, sizable, adapts to each platform properly.](https://github.com/tamagui/tamagui "Tamagui. A total UI kit for Native and Web. Composable components, themeable, sizable, adapts to each platform properly.")

- [React Native Track Player A fully fledged audio module created for music apps](https://react-native-track-player.js.org/ "React Native Track Player A fully fledged audio module created for music apps")



### Flutter



- [Awesome Clothes App](https://github.com/antonio-pedro99/awesome_clothes_shop "Awesome Clothes App")

- [Anime App UI built using Flutter](https://github.com/siddheshsonawane07/anime_app "Anime App UI built using Flutter")

- [Bank UI Futter Template](https://github.com/MonsieurZbanowanYY/Bank-UI-Flutter "Bank UI Futter Template")

- [Dice game animation made with flutter](https://github.com/clickfrancis/jogo_de_dado_flutter "Dice game animation made with flutter")

- [Fashion ecommerce app built with flutter](https://github.com/Devlonoah/Open-Fashion "fashion ecommerce app built with flutter")

- [Finance App UI With Flutter](https://github.com/THANGADURAISELVARAJ/Flutter---Finance-UI "Finance App UI With Flutter")

- [Flutter eCommerce Template](https://github.com/Abdulkadir19997/ecommerce-shope-app "Flutter eCommerce Template")

- [Flutter image edit app for web, android, and iOS](https://github.com/topex-psy/Drawie "Flutter image edit app for web, android, and iOS")

- [Fruit shopping app UI for Flutter](https://github.com/kadironer/fruit_shopping_app "Fruit shopping app UI for Flutter")

- [Login page with flutter](https://github.com/justkingsley/login-page "Login page with flutter")

- [Login Page UI](https://github.com/justkingsley/login-page "Login Page UI")

- [Messenger-UI-Clone](https://github.com/anishghale007/Messenger-UI-Clone "Messenger-UI-Clone")

- [Multi Image Picker With Flutter](https://github.com/idabgsram/multi_image_picker "Multi Image Picker With Flutter")

- [Onboarding screens for grocery app using flutter](https://github.com/ritsat/onboarding_screens "Onboarding screens for grocery app using flutter")

- [Simple chat app UI design in Flutter](https://github.com/afgprogrammer/Flutter-simple-chat-app "Simple chat app UI design in Flutter")

- [Simple weather app with flutter](https://github.com/gcoutinho1/weather "Simple weather app with flutter")

- [Searchable listview built with Flutter](https://github.com/pradum97/Flutter-searchable-listview "Searchable listview built with Flutter")

- [ToDo App with Flutter](https://github.com/MuharremKoroglu/Goode_Notes "ToDo App with Flutter")

- [Task Management UI Template with Flutter](https://github.com/AgnelSelvan/Flutter-UI-Template "Task Management UI Template with Flutter")

- [Travel App UI for Flutter](https://github.com/abdulkerimcan/travel_app_ui "Travel App UI for Flutter")

- [Flutter Intro Layout](https://github.com/didik-maulana/flutter_intro_layout)

- [Flutter Auto Complete Search Sample](https://github.com/didik-maulana/flutter_autocomplete_search)

- [Find Resto Apps](https://github.com/didik-maulana/find_resto_apps)



### Xamarin



- [CSS flexbox module for Xamarin](https://github.com/xamarin/flex "CSS flexbox module for Xamarin")

- [Xamarin.Essentials - Cross-platform APIs for mobile applications](https://github.com/xamarin/Essentials "Xamarin.Essentials - Cross-platform APIs for mobile applications")

- [Xamarin.Forms - Cross-platform UI toolkit](https://github.com/xamarin/Xamarin.Forms "Xamarin.Forms - Cross-platform UI toolkit")

- [SkiaSharp - 2D Graphics Library for Xamarin](https://github.com/mono/SkiaSharp "SkiaSharp - 2D Graphics Library for Xamarin")

- [ReactiveUI - Reactive Programming for Xamarin](https://github.com/reactiveui/ReactiveUI "ReactiveUI - Reactive Programming for Xamarin")

- [Xamarin Community Toolkit - Essential Components for Xamarin Development](https://github.com/xamarin/XamarinCommunityToolkit "Xamarin Community Toolkit - Essential Components for Xamarin Development")

- [Xamarin.Auth - OAuth library for authenticating users](https://github.com/xamarin/Xamarin.Auth "Xamarin.Auth - OAuth library for authenticating users")

- [Xamarin.UITest - UI testing framework for Xamarin apps](https://github.com/xamarin/Xamarin.UITest "Xamarin.UITest - UI testing framework for Xamarin apps")

- [FFImageLoading - Fast & customizable image loading for Xamarin](https://github.com/luberda-molinet/FFImageLoading "FFImageLoading - Fast & customizable image loading for Xamarin")

- [Akavache - Caching library for Xamarin](https://github.com/reactiveui/Akavache "Akavache - Caching library for Xamarin")

- [Realm Xamarin - Mobile Database with Cloud Sync](https://github.com/realm/realm-dotnet "Realm Xamarin - Mobile Database with Cloud Sync")

- [Xamarin.Firebase - Firebase bindings for Xamarin](https://github.com/xamarin/GoogleApisForiOSComponents/tree/master/Firebase "Xamarin.Firebase - Firebase bindings for Xamarin")



### Ionic



- [Ionic-ion Tinder Cards](https://github.com/ionic-team/ionic-ion-tinder-cards "Ionic-ion Tinder Cards")

- [Ionic-Component Customizable UI Components for Ionic 4](https://github.com/fivethree-team/ionic-4-components "Ionic-Component Customizable UI Components for Ionic 4")

- [Ionic Storage - Key/Value Storage Module](https://github.com/ionic-team/ionic-storage "Ionic Storage - Key/Value Storage Module")

- [Ionic Native - A curated set of essential Native APIs for Ionic](https://github.com/ionic-team/ionic-native "Ionic Native - A curated set of essential Native APIs for Ionic")

- [Super Tabs - Cross-Platform Tabs for Ionic Framework](https://github.com/zyra/ionic-super-tabs "Super Tabs - Cross-Platform Tabs for Ionic Framework")

- [Ionic Split Pane Layout](https://ionicframework.com/docs/api/split-pane "Ionic Split Pane Layout")

- [Ionic PWA Toolkit - Tools for building Progressive Web Apps](https://github.com/ionic-team/ionic-pwa-toolkit "Ionic PWA Toolkit - Tools for building Progressive Web Apps")

- [Ionic Image Viewer - Modal Image Viewer for Ionic](https://github.com/Riron/ionic-img-viewer "Ionic Image Viewer - Modal Image Viewer for Ionic")

- [Ionic Swipeable Cards](https://github.com/devdactic/ionic-swipeable-cards "Ionic Swipeable Cards")

- [Ionic Framework Official Docs](https://ionicframework.com/docs "Ionic Framework Official Docs")



### React



- [A media gallery app build with React, Redux and Saga, using Flickr API.](https://github.com/mihailgaberov/mickey-gallery "A media gallery app build with React, Redux and Saga, using Flickr API.")

- [React-cool-music-player](https://github.com/neroneroffy/react-music-player "react-cool-music-player")

- [React Hooks app to calculate the BMI of a person.](https://github.com/GermaVinsmoke/bmi-calculator "React Hooks app to calculate the BMI of a person.")

- [React-meme-generator](https://github.com/lijinke666/react-meme-generator "React-meme-generator")

- [React Tinder Card](https://github.com/3DJakob/react-tinder-card#readme "React Tinder Card")

- [React Beautiful dnd - Beautiful and accessible drag and drop for lists with React](https://github.com/atlassian/react-beautiful-dnd "React Beautiful dnd - Beautiful and accessible drag and drop for lists with React")

- [shadcn/ui - A set of beautifully-designed, accessible components and a code distribution platform](https://ui.shadcn.com/docs "shadcn/ui - A set of beautifully-designed, accessible components and a code distribution platform")

- [TanStack Table - Headless UI for building powerful tables & datagrids](https://tanstack.com/table/latest "TanStack Table - Headless UI for building powerful tables & datagrids")

- [TanStack Query - Powerful asynchronous state management, server-state utilities and data fetching](https://tanstack.com/query/latest "TanStack Query - Powerful asynchronous state management, server-state utilities and data fetching")



### Angular



- [Angular Material Material Design components for Angular](https://material.angular.io/ "Angular Material Material Design components for Angular")

- [Customizable Slack-like emoji picker for Angular](https://github.com/scttcper/ngx-emoji-mart)

- [A wrapper for sweetalert2 for use with Angular 2](https://github.com/seiyria/ng2-sweetalert2)

- [Highly customizable component to handle file drops and selection (ngx-dropzone)](https://github.com/peterfreeman/ngx-dropzone)

- [Infinite Scroll Directive for Angular2 (based on Observables)](https://www.npmjs.com/package/angular2-infinite-scroll)

- [Official component for fullPage.js, a fullscreen scrolling library](https://github.com/alvarotrigo/angular-fullpage)

- [Pinterest like responsive masonry grid](https://github.com/s-yadav/angulargrid "Pinterest like responsive masonry grid")

- [Lightweight Angular Chart Library](https://github.com/Chtau/dlChart)

- [NGX-Bootstrap - Bootstrap components for Angular](https://github.com/valor-software/ngx-bootstrap "NGX-Bootstrap - Bootstrap components for Angular")

- [AngularFire - The official library for Firebase and Angular](https://github.com/angular/angularfire "AngularFire - The official library for Firebase and Angular")

- [NGXS - State Management for Angular](https://github.com/ngxs/store "NGXS - State Management for Angular")

- [PrimeNG - A rich UI component library for Angular](https://github.com/primefaces/primeng "PrimeNG - A rich UI component library for Angular")

- [Nebular - Customizable Angular UI Kit](https://github.com/akveo/nebular "Nebular - Customizable Angular UI Kit")

- [Angular Google Maps (AGM)](https://github.com/SebastianM/angular-google-maps "Angular Google Maps (AGM)")

- [ngx-translate - Internationalization (i18n) library for Angular](https://github.com/ngx-translate/core "ngx-translate - Internationalization (i18n) library for Angular")

- [NG-ZORRO - Ant Design UI library for Angular](https://github.com/NG-ZORRO/ng-zorro-antd "NG-ZORRO - Ant Design UI library for Angular")

- [Angular CLI - Command line interface for Angular](https://github.com/angular/angular-cli "Angular CLI - Command line interface for Angular")

- [Angular Universal - Server-side rendering for Angular](https://github.com/angular/universal "Angular Universal - Server-side rendering for Angular")

- [Angular Flex Layout - Layout engine for Angular](https://github.com/angular/flex-layout "Angular Flex Layout - Layout engine for Angular")

- [Angular CDK - Component Dev Kit for Angular](https://github.com/angular/components "Angular CDK - Component Dev Kit for Angular")

- [Angular PWA - Progressive Web App utilities for Angular](https://github.com/angular/angular-pwa "Angular PWA - Progressive Web App utilities for Angular")

- [Angular Animations - Animation library for Angular](https://github.com/angular/angular "Angular Animations - Animation library for Angular")

- [Angular Service Worker - Service worker for Angular](https://github.com/angular/angular "Angular Service Worker - Service worker for Angular")

- [Angular Forms - Reactive and template-driven forms for Angular](https://github.com/angular/angular "Angular Forms - Reactive and template-driven forms for Angular")

- [Angular HTTP Client - HTTP client for Angular](https://github.com/angular/angular "Angular HTTP Client - HTTP client for Angular")

- [Angular Testing - Testing utilities for Angular](https://github.com/angular/angular "Angular Testing - Testing utilities for Angular")



### Vue



- [A Vue Signature Pad Component](https://github.com/neighborhood999/vue-signature-pad)

- [CSV components for Vue.js](https://github.com/ynishi/vuecsv)

- [Diagram component for vue.js, inspired by react-diagrams](https://github.com/gwenaelp/vue-diagrams)

- [Vue Dropzone Upload](https://github.com/rowanwins/vue-dropzone)

- [Vue Easy Slider (Slider Component of Vue.js.)](https://github.com/shhdgit/vue-easy-slider "Vue Easy Slider (Slider Component of Vue.js.)")

- [Vue component for Froala WYSIWYG HTML Rich Text Editor.](https://github.com/froala/vue-froala-wysiwyg)

- [Vue.js directive for masonry blocks layouting.](https://github.com/shershen08/vue-masonry)

- [Vuetify (Material Design Component Framework for Vue)](https://github.com/vuetifyjs/vuetify)

- [Element Plus (A Vue 3-based UI component library)](https://github.com/element-plus/element-plus)

- [Quasar Framework (Build high-performance Vue.js apps with a Material Design theme)](https://github.com/quasarframework/quasar)

- [VueUse - Collection of essential Vue Composition Utilities](https://github.com/vueuse/vueuse "VueUse - Collection of essential Vue Composition Utilities")

- [Pinia - The Vue Store that you will enjoy using](https://github.com/vuejs/pinia "Pinia - The Vue Store that you will enjoy using")

- [Nuxt.js - The Intuitive Vue Framework](https://nuxt.com/ "Nuxt.js - The Intuitive Vue Framework")

- [Vue Router - The official router for Vue.js](https://router.vuejs.org/ "Vue Router - The official router for Vue.js")

- [Vue Test Utils - Official testing utilities for Vue.js](https://github.com/vuejs/test-utils "Vue Test Utils - Official testing utilities for Vue.js")

- [Vue DevTools - Browser devtools extension for debugging Vue.js applications](https://github.com/vuejs/devtools "Vue DevTools - Browser devtools extension for debugging Vue.js applications")

- [Vue i18n - Internationalization plugin for Vue.js](https://github.com/intlify/vue-i18n "Vue i18n - Internationalization plugin for Vue.js")



### HTML CSS



- [15 CSS Blob Effects](https://freefrontend.com/css-blob-effects/ "15 CSS Blob Effects")

- [3D Card CSS HTML](https://codepen.io/gayane-gasparyan/pen/wvxewXO "3D Card CSS HTML")

- [Charts.css - CSS data visualization framework](https://chartscss.org/ "Charts.css - CSS data visualization framework")

- [Facebook Login Page Html Code With CSS](https://www.oflox.com/blog/facebook-login-page-html-code/ "Facebook Login Page Html Code With CSS")

- [Replicate the google.com page design using HTML and CSS](https://www.codespeedy.com/replicate-the-google-com-page-design-using-html-and-css/ "Replicate the google.com page design using HTML and CSS")

- [Responsive Web Login Form UI](https://github.com/raheel-anwar/Web-Login-Form-UI "Responsive Web Login Form UI")

- [Wing - A beautiful CSS framework designed for minimalists](https://github.com/kbrsh/wing "Wing - A beautiful CSS framework designed for minimalists")

- [Neumorphism.io - Generate Soft-UI CSS Code](https://neumorphism.io/ "Neumorphism.io - Generate Soft-UI CSS Code")

- [Hover.css - CSS3 Hover Effects](https://github.com/IanLunn/Hover "Hover.css - CSS3 Hover Effects")

- [CSS Grid Garden - Learn CSS Grid](https://cssgridgarden.com/ "CSS Grid Garden - Learn CSS Grid")

- [UI Gradients - Beautiful color gradients for design](https://uigradients.com/ "UI Gradients - Beautiful color gradients for design")

- [Animate.css - A library of ready-to-use animations](https://animate.style/ "Animate.css - A library of ready-to-use animations")

- [Pure.css - A set of small, responsive CSS modules](https://purecss.io/ "Pure.css - A set of small, responsive CSS modules")



## License



Each file included in this repository is licensed under the [CC BY License](LICENSE).