DEV Community

Cover image for 12 Modern UI Components to Inspire Your Future Designs 😍✨
Madza
Madza Subscriber

Posted on • Originally published at madza.hashnode.dev

12 Modern UI Components to Inspire Your Future Designs 😍✨

Component-based architecture is now used in the vast majority of sites, resulting in faster development, greater control, and lower maintenance costs.

In this article, I have compiled some of the sleekest and most modern-looking UI components you can use to inspire your future projects.

Each component will include a direct link, an interactive preview, and the author profile, so you can explore more of their work.


1. Responsive cards

By: David Foliti

2. Product Slider

By: Muhammed Erdem

3. Expanding Flex cards

By: Zed Dash

4. Info Cards

By: Nathan Taylor

5. Motion Blur with SVG filters

By: DamiΓ‘n Muti

6. Interactive SVG Info Graph

By: Chris Gannon

7. Animated Unsubscribe Page

By: agathaco

8. Shopping UI

By: morooka

9. Music Player

By: Rafaela Lucas

10. Progress Bar

By: S G

11. React Color Gradients

By: Marco Biedermann

12. Ghost Card

By: Yugam


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!

Connect me on Twitter, LinkedIn and GitHub!

Visit my Blog for more articles like this.

Top comments (25)

Collapse
 
aarone4 profile image
Aaron Reese

Love the ghost card.

Collapse
 
madza profile image
Madza

Great to hear that, thanks πŸ‘βœ¨πŸ’―

Collapse
 
zoreankit profile image
Ankit Zore • Edited

Thank-You @madza. In love with Info cards and Animated Unsubscribe πŸ€—. Big thanks to creators Nathan & agathaco

Collapse
 
madza profile image
Madza

Happy to hear you found them useful πŸ‘βœ¨πŸ’―

Collapse
 
alcirx profile image
alcirx

This is amazing. Thank you so much!

Collapse
 
madza profile image
Madza

My pleasure πŸ‘πŸ’―βœ¨

Collapse
 
lexpeee profile image
Elex

Damn, I love the ghost card and the motion blur. Great job!

Collapse
 
madza profile image
Madza

Glad you liked them πŸ‘βœ¨πŸ’―

Collapse
 
lico profile image
SeongKuk Han

Creative, Nice!

Collapse
 
madza profile image
Madza

Thanks a lot πŸ‘βœ¨πŸ’―

Collapse
 
olamphzy profile image
Olamphzy

Thanks for this project, I'm using it to build my own project and it help in understanding.

Collapse
 
madza profile image
Madza

My pleasure πŸ‘βœ¨πŸ’―

Collapse
 
hnazmul profile image
H.Nazmul Hassan

These things are super awesome 😍😍

Collapse
 
madza profile image
Madza

Thank you so much πŸ‘πŸ’―βœ¨

Collapse
 
saysonjerald profile image
Jerald Sayson

Awesome

Collapse
 
madza profile image
Madza

Thanks a lot πŸ‘βœ¨πŸ’―

Collapse
 
soumavabanerjee profile image
Soumava Banerjee

Amazing collection! Thanks for sharing!

Collapse
 
madza profile image
Madza

My pleasure to share, thanks a lot πŸ‘βœ¨πŸ’―

Collapse
 
andrewbaisden profile image
Andrew Baisden

Another great resource.

Collapse
 
madza profile image
Madza

Glad you liked them βœ¨πŸ‘πŸ’―