DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for 12 Modern UI Components to Inspire Your Future Designs 😍✨
Madza
Madza

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 (26)

Collapse
 
aarone4 profile image
Aaron Reese

Love the ghost card.

Collapse
 
madza profile image
Madza Author

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

Collapse
 
zoreankit profile image
ZoreAnkit • Edited on

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

Collapse
 
madza profile image
Madza Author

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

Collapse
 
lexpeee profile image
Elex

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

Collapse
 
madza profile image
Madza Author

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

Collapse
 
lico profile image
SeongKuk Han

Creative, Nice!

Collapse
 
madza profile image
Madza Author

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 Author

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

Collapse
 
hnazmul profile image
H.Nazmul Hassan

These things are super awesome 😍😍

Collapse
 
madza profile image
Madza Author

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

Collapse
 
allobrox profile image
Tamas Rigoczki

Nice selection Madza! That is a beautiful unsubscribe page, but I can't decide if it is worth designing or not.

Collapse
 
madza profile image
Madza Author

Glad you find it useful πŸ‘πŸ’―βœ¨

Collapse
 
saysonjerald profile image
Jerald Sayson

Awesome

Collapse
 
madza profile image
Madza Author

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

Collapse
 
soumavabanerjee profile image
Soumava Banerjee

Amazing collection! Thanks for sharing!

Collapse
 
madza profile image
Madza Author

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

Collapse
 
alonedatascientist profile image
alonedatascientist

This is great to get over that "how do I do this differently" hill. Great work!

Collapse
 
madza profile image
Madza Author

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

Collapse
 
andrewbaisden profile image
Andrew Baisden

Another great resource.

Collapse
 
madza profile image
Madza Author

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

Collapse
 
alcirx profile image
alcirx

This is amazing. Thank you so much!

Collapse
 
madza profile image
Madza Author

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

Collapse
 
joset98 profile image
joset98

Hey pal thia post was awesome, i love everyone, thank you

Collapse
 
madza profile image
Madza Author

My pleasure, glad you liked it πŸ‘πŸ’―βœ¨

What image format should you use in your next project? πŸ€”