12 Gorgeous UI Components for Your Design Inspiration 🎨✨
Tags: webdev, design, css, ux
Published: 2022-03-10 18:38:45

---
title: 12 Gorgeous UI Components for Your Design Inspiration 🎨✨
published: true
description: 
tags: webdev, design, css, ux
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wc1yc9m48zjeiwtelghg.png
canonical_url: https://madza.hashnode.dev/12-gorgeous-ui-components-for-your-design-inspiration
---
Modern web development has shifted to component-based architecture, resulting in faster development, more control and lower maintenance costs. In this article I handpicked some of my favorite UI components for your design inspiration.

I tried to include different types of some of the most used components in our development workflow including cards, text, buttons, checkboxes, icons, loaders and menus.

For each component I will provide a direct link, an interactive preview so you can get initial impression on the fly as well as the author links, so you can explore more of their work, too.

### 1. [Card Slider](https://codepen.io/aybukeceylan/pen/yLaqqOL)
By [Aybüke Ceylan](https://codepen.io/aybukeceylan)

{% codepen https://codepen.io/aybukeceylan/pen/yLaqqOL %}

### 2. [Sign up / Log in](https://codepen.io/FlorinPop17/pen/vPKWjd)
By: [FlorinPop](https://codepen.io/FlorinPop17)

{% codepen https://codepen.io/FlorinPop17/pen/vPKWjd %}

### 3. [Checkbox Group](https://codepen.io/havardob/pen/BapJYMg)
By: [Håvard Brynjulfsen](https://codepen.io/havardob)

{% codepen https://codepen.io/havardob/pen/BapJYMg %}

### 4. [Animated Tab Bar](https://codepen.io/abxlfazl/pen/OJbEbxL)
By: [abxlfazl khxrshidi](https://codepen.io/abxlfazl)

{% codepen https://codepen.io/abxlfazl/pen/OJbEbxL %}

### 5. [Apple TV - Word Rotation](https://codepen.io/stevenlei/pen/RwpRgzy)
By: [Steven Lei](https://codepen.io/stevenlei)

{% codepen https://codepen.io/stevenlei/pen/RwpRgzy %}

### 6. [Spotlight Cursor Text](https://codepen.io/carolineartz/pen/rNaGQYo)
By: [Caroline Artz](https://codepen.io/carolineartz)

{% codepen https://codepen.io/carolineartz/pen/rNaGQYo %}

### 7. [Glass Card](https://codepen.io/creativeocean/pen/oNzjEYj)
By: [Tom Miller](https://codepen.io/creativeocean)

{% codepen https://codepen.io/creativeocean/pen/oNzjEYj %}

### 8. [3D Orange Switch](https://codepen.io/ykadosh/pen/jOwjmJe)
By: [Yoav Kadosh](https://codepen.io/ykadosh)

{% codepen https://codepen.io/ykadosh/pen/jOwjmJe %}

### 9. [Jello Tab Bar](https://codepen.io/flavio_amaral/pen/xxgYGrR)
By: [Flávio Amaral](https://codepen.io/flavio_amaral)

{% codepen https://codepen.io/flavio_amaral/pen/xxgYGrR %}

### 10. [Simple CSS Loaders](https://codepen.io/jenning/pen/YzNmzaV)
By: [Jenning](https://codepen.io/jenning)

{% codepen https://codepen.io/jenning/pen/YzNmzaV %}

### 11. [Feedback Reactions](https://codepen.io/aaroniker/pen/qBjyKGO)
[Aaron Iker](https://codepen.io/aaroniker)

{% codepen https://codepen.io/aaroniker/pen/qBjyKGO %}

### 12. [CSS Glowing Icons](https://codepen.io/Krishnaa_Gupta/pen/MWoRqmr)
By: [Krishna Gupta](https://codepen.io/Krishnaa_Gupta)

{% codepen https://codepen.io/Krishnaa_Gupta/pen/MWoRqmr %}

<hr>

Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

If you found these useful, connect me on [Twitter](https://twitter.com/madzadev), [LinkedIn](https://www.linkedin.com/in/madzadev/) and [GitHub](https://github.com/madzadev)!

Visit my [Blog](https://madza.dev/blog) for more articles like this.