DEV Community

Cover image for Simple UI Component Library Project Based On Tailwind UI Components Design
Nisarg Patel
Nisarg Patel

Posted on

Simple UI Component Library Project Based On Tailwind UI Components Design

Hey Everyone👋!
Welcome to my first ever online blog post. I have always been a fan of web design and believed in creating something elegant and beautiful but functional at the same time.

Several months ago I discovered a utility first framework called Tailwind CSS and after using it in a few of my projects I was hooked to the concept. Now from the start of my career, I have always been a front-end developer responsible for bringing the design files to life in a browser. Even though I consider myself to be quite good😅 at recreating those UI files I suck at creating a UI from scratch. A few months ago I learned that the founders of Tailwind CSS have launched a UI Components library called Tailwind UI built using Tailwind CSS.

After going through their UI components repository I was amazed by their simplistic design having functional use. So I challenged myself to recreate those UI components but only using CSS/SCSS.

At the point of writing this blog post, I have around 125 UI components on the website. Following are few UI component examples.


Now please note that this project is still in development and I will keep on adding new components from Tailwind UI whenever I have some spare time. Drop in a comment if you liked/disliked anything about those components.


Top comments (4)

moinulmoin profile image
Moinul Moin

great work!

I am highly interested to know how you make this component library website? i mean you make the website design and develop from scratch? or use any service make your component library site instant with features like preview and code showing


ericchapman profile image
Eric The Coder

Good job 👍

nisargp08 profile image
Nisarg Patel

Thank you✌

nikdesigns profile image

Why this looks similar to