Design System with React - Series

1. Intro

2. What is a Design System?

3. Building a basic Design System Library using React

4. Button as a Design System Component

5. Component Library With Microbundle

6. Component Library With Vite - JS Template

Intro

As a full-stack JS developer, who mostly worked on JS and node.js, the one thing where I used to lack was CSS. After running away from CSS for more than 4-5 years at the start of my career when I started learning CSS - the Grid and Flexbox layout boosted my confidence and I started liking CSS. Then I started with the basics of HTML, and CSS and one article which helped me grow further and cleared out all the doubts and fear of learning CSS was this https://learn.shayhowe.com/, which I recommend to everyone(not limited to beginners) even today.

As I deep-dived more into the CSS world, I got to know about many new things - Bootstrap, SaSS, CSS-in-JS, MaterialUI, Box Model, Grid Model and many more old and modern keywords. Then after working on a large UI application, I got to know that even in CSS we need to properly design and plan our UI components. The whole architecture of the frontend app, CSS guidelines, best practices, Style Guide etc led me to the UI/UX and then I finally reached the world of Design Systems, which when I started to explore further had amazingly blown my mind.

And recently, I built my first basic Design System with React and I wanted to share what I have learned and How I build it? This series is a beginner-friendly, step-by-step guide to building and releasing your own component library. By the end of this series, you will be able to create a React component library with modern tools and frameworks like tailwindcss, twin-macro and Vite

---

1. ✅ Intro

2. What is a Design System?

3. Building a basic Design System Library using React

4. Button as a Design System Component

5. Component Library With Microbundle

6. Component Library With Vite - JS Template

I hope you are enjoying this series and learning something new. Please help me improve my work by adding comments or sending me an email. Thanks!