{"id":14113113,"url":"https://github.com/joshsaintjacque/awesome-ui-patterns","last_synced_at":"2025-08-01T16:32:41.111Z","repository":{"id":117613402,"uuid":"245925137","full_name":"joshsaintjacque/awesome-ui-patterns","owner":"joshsaintjacque","description":"A collection of UI resources that are 😎 awesome / beautiful.","archived":false,"fork":false,"pushed_at":"2020-07-20T05:08:01.000Z","size":12546,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-19T13:01:35.685Z","etag":null,"topics":["animation","components","css","react","ui","ux"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joshsaintjacque.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-03-09T02:19:16.000Z","updated_at":"2020-07-20T05:08:04.000Z","dependencies_parsed_at":"2024-01-13T13:46:23.223Z","dependency_job_id":"1ac798ff-83b6-4d93-8930-4e30e41ed2df","html_url":"https://github.com/joshsaintjacque/awesome-ui-patterns","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshsaintjacque%2Fawesome-ui-patterns","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshsaintjacque%2Fawesome-ui-patterns/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshsaintjacque%2Fawesome-ui-patterns/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshsaintjacque%2Fawesome-ui-patterns/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joshsaintjacque","download_url":"https://codeload.github.com/joshsaintjacque/awesome-ui-patterns/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227990205,"owners_count":17852201,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","components","css","react","ui","ux"],"created_at":"2024-08-14T10:04:03.492Z","updated_at":"2024-12-06T00:31:23.440Z","avatar_url":"https://github.com/joshsaintjacque.png","language":null,"funding_links":[],"categories":["Other Lists"],"sub_categories":["TeX Lists"],"readme":"# Awesome UI Patterns\nA collection of UI patterns that are 😎 awesome / beautiful.\n\n## Sources\nWeb sites that aggregate good design.\n\n- [Collect UI](http://collectui.com/)\n- [CodePen](https://codepen.io/)\n- [CSS Nector](https://cssnectar.com/)\n- [Behance](https://www.behance.net)\n- [Pttrns](https://pttrns.com/)\n- [Dribbble](https://dribbble.com/)\n\n## Other Lists\n\n- [Design Resources for Developers](https://github.com/bradtraversy/design-resources-for-developers)\n- [35 Free React Templates and Themes](https://dev.to/davidepacilio/35-free-react-templates-and-themes-32ci)\n\n## Tools\n\n- [CSS Box Shadow Generator](https://www.cssmatic.com/box-shadow)\n- [Stylify Me - Online Style Guide Generator](http://stylifyme.com/?stylify=www.spotify.com)\n- [CSS Effects Snippets](https://emilkowalski.github.io/css-effects-snippets/)\n- [Logaster logo maker](https://www.logaster.com/)\n- [Miroodles](https://blush.design/collections/miroodles/builder/zZfzSb-wS)\n- [CSS Separator Generator](https://wweb.dev/resources/css-separator-generator)\n- [SneakPeekIt](https://sneakpeekit.com/) printable device templates\n\n## Elements\nIndividual UI element examples that are really impressive. Can be live code snippets or designs.\n\n### Accordians\n\n#### [CSS Accordian](https://codepen.io/mxttsco/pen/EgAVjo)\n\n![](images/accordians/accordian-gif.gif)\n\n#### [CSS Accordian #2](https://codepen.io/villa7/pen/grPddp)\n\n![](images/accordians/css-accordian-2.gif)\n\n#### [CSS + HTML only Accordion Element](https://codepen.io/abergin/pen/ihlDf)\n\n![](images/accordians/css-html-only-accordian-element.gif)\n\n#### [Accordian](https://codepen.io/valaxin/pen/reQMXp)\n\n![](images/accordians/accordian.gif)\n\n### Buttons\n\n#### [Trash button animation](https://codepen.io/aaroniker/pen/BaNzEWe)\n\n![](images/buttons/trash-button-animation.gif)\n\n### Checkboxes\n\n#### [Checklist Animation](https://codepen.io/milanraring/pen/QWbqBGo)\n\n![](images/checkboxes/checklist-animation.gif)\n\n#### [Pure CSS toggle buttons](https://codepen.io/mallendeo/pen/eLIiG)\n\n![](images/checkboxes/pure-css-toggle-buttons.gif)\n\n### Cards\n\n#### [Hover Card Interactions](https://codepen.io/hexagoncircle/pen/XWbWKwL)\n\n![](images/cards/hover-card-interactions.gif)\n\n## Sites / Apps\nExamples of web applications in the wild that really nail some aspect of their UI/UX.\n\n### Coming soon...\n\n## Designs\n\n### Sign Up/In Forms\n\n#### [Sign Up and Login Animated](https://dribbble.com/shots/2311260-Day-1-Sign-Up-and-Login-Animated-Download-Template)\n\n![](images/designs/sign-up-and-login-animated-2.gif)\n\n#### [Task Manager Concept Sign Up](https://dribbble.com/shots/2878911-To-Do-App-Concept-Sign-Up)\n\n![](images/designs/task-manager-concept-sign-up.png)\n\n#### [Game Login](https://dribbble.com/shots/2358349-Daily-Shmaily-UI-1-Game-Login)\n\n![](images/designs/game-login.png)\n\n#### [Sign Up Window](https://dribbble.com/shots/2404873-Sign-Up-Window-Daily-UI-001)\n\n![](images/designs/sign-up-window.png)\n\n## Libraries\nPre-built libraries that are ready to use.\n\n### CSS Frameworks\n\n#### [Tailwind CSS](https://www.youtube.com/watch?v=mCa0JXEwDEk)\n\n![](images/libraries/tailwind-css.png)\n\n#### [Materialize CSS](https://materializecss.com/)\n\n![](images/libraries/materialize-css.png)\n\n#### [Bootstrap](https://getbootstrap.com/)\n\n![](images/libraries/bootstrap.png)\n\n#### [BOOTSTRA.386](https://github.com/kristopolous/BOOTSTRA.386)\n\n![](images/libraries/bootstrap-386.png)\n\n#### [Terminal CSS](https://github.com/Gioni06/terminal.css)\n\n![](images/libraries/terminal-css.png)\n\n#### [PaperCSS](https://github.com/papercss/papercss)\n\n![](images/libraries/paper-css.png)\n\n#### [RPGUI](https://github.com/RonenNess/RPGUI)\n\n![](images/libraries/rpgui.jpg)\n\n#### [Geo-Bootstrap](https://github.com/divshot/geo-bootstrap)\n\n![](images/libraries/geo-bootstrap.png)\n\n#### [XP.css](https://botoxparty.github.io/XP.css/)\n\n![XP.css](images/libraries/xp-css.png)\n\n### React Component Libraries\n\n#### [React95](https://github.com/React95/React95)\n\n![](images/libraries/react95.png)\n\n#### [Treact](https://treact.owaiskhan.me/)\n\n![](images/libraries/treact.png)\n\n#### [React Spectrum](https://react-spectrum.adobe.com/blog/introducing-react-spectrum.html)\n\n## CSS Framework Resources\n\n### Tailwind\n\n#### [Tailwind Blocks](https://mert.dev/tailwind-blocks/)\n\n#### [Awesome Tailwind CSS](https://github.com/aniftyco/awesome-tailwindcss)\n\n## CSS Snippets\n\n### [CSS Effect Snippets](https://emilkowalski.github.io/css-effects-snippets/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshsaintjacque%2Fawesome-ui-patterns","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoshsaintjacque%2Fawesome-ui-patterns","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshsaintjacque%2Fawesome-ui-patterns/lists"}