Building a basic Design System Library using React

  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

In this series, we will be using the below-mentioned frameworks, libraries and tools.

Tech stack

  1. React - Modern JS Framework

  2. Tailwind CSS - utility-based CSS library for consistent CSS classes across the project.

  3. Twin Macro - Emotions/Styled Components based library to combine and compose different classes to make variants-based components

  4. MicroBundle - Legacy Build Tool

  5. Vite - Modern build tool

While other doesn't need an introduction, surely Twin-macro does.

Twin Macro

Many will still debate over the use of tailwindcss, but for me, it was sure shot going to be part of my stack and the only thing which bothered me and most others while using tailwind is that as your component grows and you add conditional styling, and responsive styling, the react components look more like tailwind component bcoz tailwind classes cover up the large part of the component code then JS and React itself.

To tackle this situation and to make my component more reusable across my app, twin-macro's flexibility of CSS-in-JS helped seamlessly integrate tailwind classes and reduced the amount of code and styling required to manage the components. It's not only for small components like Button but large components like Form, Table, and DatePicker can also be managed properly with it. Each component has its own challenges while making them a part of the design system. With twin, its almost similar to manage and style as we will do for a Button.

By combining the benefits of tailwindcss with Twin-Macro and following SOLID Principles, my React Components started to look cleaner and more maintainable and I started gaining more confidence with my design system approach.

To know more about Solid Principles with React, check this video.

In the next article, we will implement the Design System approach using the frameworks, libraries and tools mentioned above in this article.


  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 useful. Please help me improve my work by providing proper feedback via adding comments or do send me an email.