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.
1. Card Slider
2. Sign up / Log in
By: FlorinPop
3. Checkbox Group
4. Animated Tab Bar
5. Apple TV - Word Rotation
By: Steven Lei
6. Spotlight Cursor Text
By: Caroline Artz
7. Glass Card
By: Tom Miller
8. 3D Orange Switch
By: Yoav Kadosh
9. Jello Tab Bar
By: Flávio Amaral
10. Simple CSS Loaders
By: Jenning
11. Feedback Reactions
12. CSS Glowing Icons
By: Krishna Gupta
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.
Oldest comments (117)
❤️👍
Thanks a lot 🙏💖
The number 11. The feedback reaction is insane! 😍
Love it so much, too 😍✨
Thanks for sharing them 😍
Always my pleasure! 👍💯
Thanks for checking it out 👍😉
Feel so great to help ✨👍😉
Out of the box use of CSS, great 👍.
Awesome to hear, thanks for checking out 👍🙏
Thanks for info
My pleasure 👍🙏
I cannot use them in my favorite tech stack but I really like them.
My pleasure to provide 👍🙏
wow. nice😎
Thank you 🙏💖
Wow interesting !
Lovely! The Jello Tab Bar is my favourite, simple yet satisfying. The 3D orange switch is a little too realistic for me, almost got dizzy watching it lol.
Thanks a lot 👍💯
Same here... I'm actually building my own personal blog site for none techy things that don't need to be on dev.to or medium or hashnode so will definitely be considering this as a simple implementation of a topic tab switcher
Bring it to life! I rarely see these kind of cool animations out in the wild.
Excatly 💯👍
Good luck wit it 💯👍
Woah these are cool!
Thanks a lot 👍💯
np! really liked them
Thanks a lot! 👍😉
Here is a blob menu I created using SVG:
Blob Menu
This is awesome, nice job 👍✨
Thanks very much 🙏👏🏻
My pleasure 💯👍
It looks very cool, but it’s way to slow. If u fix that it’s 10/10
Do you mean, slow to load or the animation speed?
If you are talking about the latter, then that is easy to fix.
It is just a TweenMax setting. 🙏
I meant the actual animation speed, so yes that should be a super easy fix :).
I agree... I love it, but the animation speed is too slow. Problem is if you speed it up, maybe all the visual effects will be lost
Yes. Exactly. If it is too fast, you might lose that blobby effect? But, it is easy to speed up, anyway…
Thanks for the input 👍💯
Beautiful!
Thanks Luis! 🙏👏🏻
amazing
Thank you, Adnane 🙏👏🏻
Good one!
I wonder if these might make sense to be in a lit element that you could import into a project easily?
The code is available, so you could implement that 😉👍
Perfect!
Thanks a lot! 💖