12 Modern UI Components to Inspire Your Future Designs 😍✨
Tags: webdev, design, ui, inspiration
Published: 2022-09-08 16:08:58

---
title: 12 Modern UI Components to Inspire Your Future Designs 😍✨
published: true
description: 
tags: webdev, design, ui, inspiration
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scnrm2bxol261sqbs5nk.png
canonical_url: https://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.

<hr>

## 1. [Responsive cards](https://codepen.io/marlenesco/pen/NqOozj)
By: [David Foliti](https://codepen.io/marlenesco)

{% codepen https://codepen.io/marlenesco/pen/NqOozj %}

## 2. [Product Slider](https://codepen.io/JavaScriptJunkie/pen/vzWPbV)
By: [Muhammed Erdem](https://codepen.io/JavaScriptJunkie)

{% codepen https://codepen.io/JavaScriptJunkie/pen/vzWPbV %}

## 3. [Expanding Flex cards](https://codepen.io/z-/pen/OBPJKK)
By: [Zed Dash](https://codepen.io/z-)

{% codepen https://codepen.io/z-/pen/OBPJKK %}

## 4. [Info Cards](https://codepen.io/nathantaylor/pen/WOgBQN)
By: [Nathan Taylor](https://codepen.io/nathantaylor)

{% codepen https://codepen.io/nathantaylor/pen/WOgBQN %}

## 5. [Motion Blur with SVG filters](https://codepen.io/damianmuti/pen/MvYPPa)
By: [Damián Muti](https://codepen.io/damianmuti)

{% codepen https://codepen.io/damianmuti/pen/MvYPPa %}

## 6. [Interactive SVG Info Graph](https://codepen.io/chrisgannon/pen/pbzEYr)
By: [Chris Gannon](https://codepen.io/chrisgannon)

{% codepen https://codepen.io/chrisgannon/pen/pbzEYr %}

## 7. [Animated Unsubscribe Page](https://codepen.io/agathaco/pen/NyQgQX)
By: [agathaco](https://codepen.io/agathaco)

{% codepen https://codepen.io/agathaco/pen/NyQgQX %}

## 8. [Shopping UI](https://codepen.io/mo-ro/pen/jObjGJm)
By: [morooka](https://codepen.io/mo-ro)

{% codepen https://codepen.io/mo-ro/pen/jObjGJm %}

## 9. [Music Player](https://codepen.io/rafaelavlucas/pen/GRgEeed)
By: [Rafaela Lucas](https://codepen.io/rafaelavlucas)

{% codepen https://codepen.io/rafaelavlucas/pen/GRgEeed %}

## 10. [Progress Bar](https://codepen.io/gssssssssss/pen/LYWZaoy)
By: [S G](https://codepen.io/gssssssssss)

{% codepen https://codepen.io/gssssssssss/pen/LYWZaoy %}

## 11. [React Color Gradients](https://codepen.io/marcobiedermann/pen/WNGWzYR)
By: [Marco Biedermann](https://codepen.io/marcobiedermann)

{% codepen https://codepen.io/marcobiedermann/pen/WNGWzYR %}

## 12. [Ghost Card](https://codepen.io/pizza3/pen/pobevYW)
By: [Yugam](https://codepen.io/pizza3)

{% codepen https://codepen.io/pizza3/pen/pobevYW %}

<hr>

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](https://twitter.com/madzadev), [LinkedIn](https://www.linkedin.com/in/madzadev/) and [GitHub](https://github.com/madzadev)!

Visit my [Blog](https://madza.dev/blog) for more articles like this.