Madza

Posted on Mar 10, 2022 • Originally published at madza.hashnode.dev

12 Gorgeous UI Components for Your Design Inspiration 🎨✨

#webdev #design #css #ux

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.

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.

Latest comments (117)

Cao Quốc Minh • Jul 19 '22

Hey bro, so beautiful.

Madza • Jul 19 '22

Thanks a lot! 👍💯✨

SYED MD HASNAIN JAH • Apr 13 '22

Amazing content mate, thanks a ton

Madza • Apr 13 '22

My pleasure to help 👍💯

aspiringDev22 • Apr 6 '22

Wow , very helpful man !

Madza • Apr 6 '22

Happy to help 😉

optimisedu • Mar 27 '22

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

Madza • Mar 27 '22

My pleasure 💯👍

Bevis • Mar 16 '22

soooo cool!

Madza • Mar 16 '22

Thanks a lot 👍💯

Madza • Mar 16 '22

Thanks a lot 💯👍

Javad Gheisari • Mar 16 '22

nice, thanks for sharing

Madza • Mar 16 '22

My pleasure 🙏❤

Jei • Mar 16 '22

Awesome

Madza • Mar 16 '22

Thanks! 🤩😊

Román APF • Mar 15 '22

Super Nice!

Madza • Mar 15 '22

Thanks a lot 👍💯

Thomas Hansen • Mar 15 '22

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 ...

Madza • Mar 15 '22

Thanks for the feedback, might do some in future 😉👍

Jackson Miller • Mar 15 '22

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!