Creating a robust and reusable component library is a fundamental aspect of modern web development. If you've ever wondered how to develop component libraries like Material UI or Mantine UI from scratch, you're in the right place. In this article, we will delve into the essential steps for creating your own component library. So, let's embark on this journey!

📜 Table of Content

• 📜 Table of Content
• 🛠️ Techs & Pre-Knowledge
• 🔭 Project Description
• 👟 Init NPM Project
• ⚙️ Configure Typescript
• 🧱 Create Components
• ⛑️ Build

🛠️ Techs & Pre-Knowledge

In this tutorial, we will be utilizing the following technologies:

• React.js
• TypeScript
• NPM
• esbuild
• Storybook
• GitHub

Throughout this tutorial, we assume that you already possess a basic understanding of the following concepts. If you are unfamiliar with any of them, please refer to articles covering the topics below:

• Basic React.js
• Basic TypeScript
• Basic GitHub
• Basic NPM

🔭 Project Description

So, in this project, we will create a component library called cool-components that includes customizable components. To keep things simple, we will focus on creating just one component: the Button! Users will be able to adjust the color, variant, and size of the Button. Curious about how? Let's dive in!

Note: If you would like to see the final result of this project, please visit the following link.

👟 Init NPM Project

⚙️ Configure Typescript

🧱 Create Components

⛑️ Build

🚀 Publish into NPM

🤖 (Optional) Automate Publish Using Github

📚 (Optional) Add StoryBook