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

195 41

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.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

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 โœจ๐Ÿ‘๐Ÿ’ฏ

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more