Introduction
Hello folks...👋
This blog addresses the questions of "What is CSS Component library?", "Why do we need it?" and "How can you make one?".
Before moving ahead, let me tell you what a component library is.
CSS Component Library ⚙
If you have used tailwindCSS, Chakra-UI,Material-UI etc., then probably you are familiar with what a CSS component library is.
You can relate a component with a lego block in general. The component library is just a collection of reusable components that can be used to design your website.
These components can vary from basic text to layout of the page
Components that can be included in a component library are...📃
So, there are many components that can be part of a component library. Listing out a few of the most-used components below
Why do you require your own component library?🤨
Whenever we start a project, we always have to write CSS from scratch for every new project.
So, to avoid this task you may prefer using already existing component libraries like tailwindCSS, Chakra-UI. But, when you use them on your website, the core concepts that make them function are rarely known.
Thus, to make sure what goes behind these libraries, you have to make one for yourself too. This will not only give you a better understanding of the core concepts but also make you confident in them.
Once, you make the library and host it online, you are now free to use it wherever you want. If you want, you can also create a simple documentation site for your library.
For reference, you can have a look at my documentation site: Artery-UI, source code: Github
How to make your component library? 🤔
As we now know the necessity of a component library, let me tell you how I made mine.
- Have some understanding of basic CSS like display, positions, padding, margin, colors, etc.
- List out the components you want in your library.
- Begin with basic and simple components first, Like buttons, lists, avatars, images, and so on...
- You can replicate components from tailwindCSS, or Chakra-UI.
That's it!!!, you now have your own CSS component Library
Thanks for taking the time to read this blog. Feel free to share your opinion on this blog.