DEV Community

Cover image for 12 Gorgeous UI Components for Your Design Inspiration 🎨✨
Madza
Madza

Posted on • Originally published at 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

By AybΓΌke Ceylan

2. Sign up / Log in

By: FlorinPop

3. Checkbox Group

By: HΓ₯vard Brynjulfsen

4. Animated Tab Bar

By: abxlfazl khxrshidi

5. Apple TV - Word Rotation

By: Steven Lei

6. Spotlight Cursor Text

By: Caroline Artz

7. Glass Card

By: Tom Miller

8. 3D Orange Switch

By: Yoav Kadosh

9. Jello Tab Bar

By: FlΓ‘vio Amaral

10. Simple CSS Loaders

By: Jenning

11. Feedback Reactions

Aaron Iker

12. CSS Glowing Icons

By: Krishna Gupta


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, LinkedIn and GitHub!

Visit my Blog for more articles like this.

Top comments (120)

Collapse
 
charlesr1971 profile image
Charles Robertson

Here is a blob menu I created using SVG:

Blob Menu

Collapse
 
p3ntest profile image
Julius (P3ntest)

It looks very cool, but it’s way to slow. If u fix that it’s 10/10

Collapse
 
charlesr1971 profile image
Charles Robertson

Do you mean, slow to load or the animation speed?
If you are talking about the latter, then that is easy to fix.
It is just a TweenMax setting. πŸ™

Thread Thread
 
p3ntest profile image
Julius (P3ntest)

I meant the actual animation speed, so yes that should be a super easy fix :).

Thread Thread
 
luisferfranco profile image
Luis F. Franco

I agree... I love it, but the animation speed is too slow. Problem is if you speed it up, maybe all the visual effects will be lost

Thread Thread
 
charlesr1971 profile image
Charles Robertson

Yes. Exactly. If it is too fast, you might lose that blobby effect? But, it is easy to speed up, anyway…

Collapse
 
madza profile image
Madza

Thanks for the input πŸ‘πŸ’―

Collapse
 
luisferfranco profile image
Luis F. Franco

Beautiful!

Collapse
 
charlesr1971 profile image
Charles Robertson

Thanks Luis! πŸ™πŸ‘πŸ»

Collapse
 
adnane_ch profile image
Adnane Chaikhi

amazing

Collapse
 
charlesr1971 profile image
Charles Robertson

Thank you, Adnane πŸ™πŸ‘πŸ»

Collapse
 
madza profile image
Madza

This is awesome, nice job πŸ‘βœ¨

Collapse
 
charlesr1971 profile image
Charles Robertson

Thanks very much πŸ™πŸ‘πŸ»

Thread Thread
 
madza profile image
Madza

My pleasure πŸ’―πŸ‘

Collapse
 
khokon profile image
Khokon M.

Good one!

Collapse
 
gloriamaldonado profile image
Gloria Maldonado βœͺ

Thanks for sharing them 😍

Collapse
 
madza profile image
Madza

Always my pleasure! πŸ‘πŸ’―

Collapse
 
z2lai profile image
z2lai

Lovely! The Jello Tab Bar is my favourite, simple yet satisfying. The 3D orange switch is a little too realistic for me, almost got dizzy watching it lol.

Collapse
 
mbakog90210 profile image
mbakoG90210

Same here... I'm actually building my own personal blog site for none techy things that don't need to be on dev.to or medium or hashnode so will definitely be considering this as a simple implementation of a topic tab switcher

Collapse
 
z2lai profile image
z2lai

Bring it to life! I rarely see these kind of cool animations out in the wild.

Thread Thread
 
madza profile image
Madza

Excatly πŸ’―πŸ‘

Collapse
 
madza profile image
Madza

Good luck wit it πŸ’―πŸ‘

Collapse
 
madza profile image
Madza

Thanks a lot πŸ‘πŸ’―

Collapse
 
sahirskd profile image
Sahir khan

Out of the box use of CSS, great πŸ‘.

Collapse
 
madza profile image
Madza

Awesome to hear, thanks for checking out πŸ‘πŸ™

Collapse
 
vulcanwm profile image
Medea

Woah these are cool!

Collapse
 
madza profile image
Madza

Thanks a lot πŸ‘πŸ’―

Collapse
 
vulcanwm profile image
Medea

np! really liked them

Thread Thread
 
madza profile image
Madza

Thanks a lot! πŸ‘πŸ˜‰

Collapse
 
optimisedu profile image
optimisedu

While a lot of these are very cool most aren't even mobile accessable although in the main they are responsive. I love CSS art but that really is what they are.

The simple CSS loaders is great though, and thank you for posting these little bits of inspiration

Collapse
 
madza profile image
Madza

My pleasure πŸ’―πŸ‘

Collapse
 
brojenuel profile image
Jenuel Oras Ganawed

thanks for sharing this stuff,,, i like the animated tab bar stuff,, I like the idea when clicking on menus,, I think Im going to use it on my portfolio website...

Collapse
 
madza profile image
Madza

Happy to help! πŸ’―πŸ‘

Collapse
 
brojenuel profile image
Jenuel Oras Ganawed

awesome!

Thread Thread
 
madza profile image
Madza

Thanks! πŸ‘πŸ’―

Collapse
 
jacksonmiller007 profile image
Jackson Miller

Greenlight is a company that can transform your kids into individuals with adequate financial knowledge. They have helped bind kids with a tool where they can learn all about investing and spending as per their savings. These savings and spendings are controlled and overseen by their guardians and parents. If you want to help a kid out with the same, you can use the greenlight promo code to get the debit card. It will come as a discounted purchase!

Collapse
 
polterguy profile image
Thomas Hansen

Do you have something amazing for "user registrations"? Preferably something in Angular. I am writing a series about creating a "register users on your site" and my next article will be about its Angular frontend parts ...

Collapse
 
madza profile image
Madza

Thanks for the feedback, might do some in future πŸ˜‰πŸ‘

Collapse
 
8thesource profile image
8theSource

Thanks for info

Collapse
 
madza profile image
Madza

My pleasure πŸ‘πŸ™

Collapse
 
delucasso profile image
LuCaS • Edited

Nice! Thanks for that set of amazing UI

Collapse
 
madza profile image
Madza

Thanks πŸ˜‰πŸ‘

Collapse
 
renanfranca profile image
Renan Franca

The number 11. The feedback reaction is insane! 😍

Collapse
 
madza profile image
Madza

Love it so much, too 😍✨

Collapse
 
aalsaedi265 profile image
Ahmed R. J. Alsaedi

All of them are awsome, thanks for sharing, I adore the glowing icon and the jelly bar.

Collapse
 
madza profile image
Madza

My pleasure to help πŸ’―πŸ‘

Collapse
 
masterpranay1 profile image
Pranay Raj

This was awesome!!

Collapse
 
madza profile image
Madza

My pleasure πŸ‘πŸ˜‰

Collapse
 
vishal590 profile image
vishal

Nice

Collapse
 
madza profile image
Madza

Thanks a lot πŸ‘πŸ˜‰