https://github.com/joshsaintjacque/awesome-ui-patterns

A collection of UI resources that are 😎 awesome / beautiful.
https://github.com/joshsaintjacque/awesome-ui-patterns

List: awesome-ui-patterns

animation components css react ui ux

Last synced: 6 months ago
JSON representation

A collection of UI resources that are 😎 awesome / beautiful.

• Host: GitHub
• URL: https://github.com/joshsaintjacque/awesome-ui-patterns
• Owner: joshsaintjacque
• License: mit
• Created: 2020-03-09T02:19:16.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-07-20T05:08:01.000Z (almost 5 years ago)
• Last Synced: 2024-05-19T13:01:35.685Z (about 1 year ago)
• Topics: animation, components, css, react, ui, ux
• Homepage:
• Size: 12 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• ultimate-awesome - awesome-ui-patterns - A collection of UI resources that are 😎 awesome / beautiful. (Other Lists / Julia Lists)

README

        
# Awesome UI Patterns

A collection of UI patterns that are 😎 awesome / beautiful.

## Sources

Web sites that aggregate good design.

- [Collect UI](http://collectui.com/)

- [CodePen](https://codepen.io/)

- [CSS Nector](https://cssnectar.com/)

- [Behance](https://www.behance.net)

- [Pttrns](https://pttrns.com/)

- [Dribbble](https://dribbble.com/)

## Other Lists

- [Design Resources for Developers](https://github.com/bradtraversy/design-resources-for-developers)

- [35 Free React Templates and Themes](https://dev.to/davidepacilio/35-free-react-templates-and-themes-32ci)

## Tools

- [CSS Box Shadow Generator](https://www.cssmatic.com/box-shadow)

- [Stylify Me - Online Style Guide Generator](http://stylifyme.com/?stylify=www.spotify.com)

- [CSS Effects Snippets](https://emilkowalski.github.io/css-effects-snippets/)

- [Logaster logo maker](https://www.logaster.com/)

- [Miroodles](https://blush.design/collections/miroodles/builder/zZfzSb-wS)

- [CSS Separator Generator](https://wweb.dev/resources/css-separator-generator)

- [SneakPeekIt](https://sneakpeekit.com/) printable device templates

## Elements

Individual UI element examples that are really impressive. Can be live code snippets or designs.

### Accordians

#### [CSS Accordian](https://codepen.io/mxttsco/pen/EgAVjo)

![](images/accordians/accordian-gif.gif)

#### [CSS Accordian #2](https://codepen.io/villa7/pen/grPddp)

![](images/accordians/css-accordian-2.gif)

#### [CSS + HTML only Accordion Element](https://codepen.io/abergin/pen/ihlDf)

![](images/accordians/css-html-only-accordian-element.gif)

#### [Accordian](https://codepen.io/valaxin/pen/reQMXp)

![](images/accordians/accordian.gif)

### Buttons

#### [Trash button animation](https://codepen.io/aaroniker/pen/BaNzEWe)

![](images/buttons/trash-button-animation.gif)

### Checkboxes

#### [Checklist Animation](https://codepen.io/milanraring/pen/QWbqBGo)

![](images/checkboxes/checklist-animation.gif)

#### [Pure CSS toggle buttons](https://codepen.io/mallendeo/pen/eLIiG)

![](images/checkboxes/pure-css-toggle-buttons.gif)

### Cards

#### [Hover Card Interactions](https://codepen.io/hexagoncircle/pen/XWbWKwL)

![](images/cards/hover-card-interactions.gif)

## Sites / Apps

Examples of web applications in the wild that really nail some aspect of their UI/UX.

### Coming soon...

## Designs

### Sign Up/In Forms

#### [Sign Up and Login Animated](https://dribbble.com/shots/2311260-Day-1-Sign-Up-and-Login-Animated-Download-Template)

![](images/designs/sign-up-and-login-animated-2.gif)

#### [Task Manager Concept Sign Up](https://dribbble.com/shots/2878911-To-Do-App-Concept-Sign-Up)

![](images/designs/task-manager-concept-sign-up.png)

#### [Game Login](https://dribbble.com/shots/2358349-Daily-Shmaily-UI-1-Game-Login)

![](images/designs/game-login.png)

#### [Sign Up Window](https://dribbble.com/shots/2404873-Sign-Up-Window-Daily-UI-001)

![](images/designs/sign-up-window.png)

## Libraries

Pre-built libraries that are ready to use.

### CSS Frameworks

#### [Tailwind CSS](https://www.youtube.com/watch?v=mCa0JXEwDEk)

![](images/libraries/tailwind-css.png)

#### [Materialize CSS](https://materializecss.com/)

![](images/libraries/materialize-css.png)

#### [Bootstrap](https://getbootstrap.com/)

![](images/libraries/bootstrap.png)

#### [BOOTSTRA.386](https://github.com/kristopolous/BOOTSTRA.386)

![](images/libraries/bootstrap-386.png)

#### [Terminal CSS](https://github.com/Gioni06/terminal.css)

![](images/libraries/terminal-css.png)

#### [PaperCSS](https://github.com/papercss/papercss)

![](images/libraries/paper-css.png)

#### [RPGUI](https://github.com/RonenNess/RPGUI)

![](images/libraries/rpgui.jpg)

#### [Geo-Bootstrap](https://github.com/divshot/geo-bootstrap)

![](images/libraries/geo-bootstrap.png)

#### [XP.css](https://botoxparty.github.io/XP.css/)

![XP.css](images/libraries/xp-css.png)

### React Component Libraries

#### [React95](https://github.com/React95/React95)

![](images/libraries/react95.png)

#### [Treact](https://treact.owaiskhan.me/)

![](images/libraries/treact.png)

#### [React Spectrum](https://react-spectrum.adobe.com/blog/introducing-react-spectrum.html)

## CSS Framework Resources

### Tailwind

#### [Tailwind Blocks](https://mert.dev/tailwind-blocks/)

#### [Awesome Tailwind CSS](https://github.com/aniftyco/awesome-tailwindcss)

## CSS Snippets

### [CSS Effect Snippets](https://emilkowalski.github.io/css-effects-snippets/)