A CLI toolbox for creating design systems in minutes

Uses: Typescript, CSS, styled-components support

Outputs: CJS and MJS

No tooling configuration required

Overview

Design-systems-cli is basically a Create React App for design systems.

The main benefit it brings you as a developer is time savings. Setting up all of the monorepo, storybook, and build tools for a design system takes over a week if you piece it together yourself. You can do it with this project in minutes.

Features

⭐ Scaffold components and entire design systems

⭐ Build your components for multiple outputs (cjs and esm)

⭐ Write styles with styled-components or css-modules

⭐ Craft excellent components using Storybook

⭐ Let component consumer try your components with playroom

⭐ Testing and linting support

⭐ Typescript supported out of the box

⭐ Track the size of your components and debug the changes

For the full documentation, go here.

Installation

Ensure you have the following softwares installed:

• Node >= 10.18.1 - Installation guide
• Yarn - Installation guide

To get started:

To get set up, fork and clone the project then run the following command:

yarn && yarn start

Creating a new Plugin

To scaffold a new plugin inside this repo run the following command:

yarn run create:plugin "my plugin"

Contributing

Feel free to open an issue or a pull request!

Make sure to read our code of conduct.

We actively welcome pull requests. Learn how to contribute.

Contributors ✨

Thank you to all these wonderful people (emoji key):

Adam Dierkens 💻 🎨 🤔 📖 ⚠️	Andrew Lisowski 💻 🎨 📖 🤔 🚇 ⚠️	Tyler Krupicka 💻 📖 ⚠️	Kendall Gassner 💻 📖 ⚠️	Kelly Harrop 🎨	Peter Mikitsh 📖	WhiteSource Renovate 💻 ⚠️
mishavp2001 💻	Raj Vasikarla 💻 📖 ⚠️	Brandon Orther 📖 💻	alan-cruz2 💻	hainessss 💻	Athitya Kumar 💻	Jason Rundell (he/him) 📖 ⚠️ 💻
Reuben 📖	my99N 📖 ⚠️ 💻	anjaliguptaz 📖	chaopan ⚠️	Talor Anderson 💻 📖 ⚠️	Spencer Hamm 💻	Adil Malik ⚠️
Salil Cuncoliencar 📖 ⚠️ 💻	Gaurav Kesarwani 📖 ⚠️ 💻	Nicolas Hoizey 📖	Harris Borawski 💻	Sean Powell 💻	melindali255 📖 ⚠️ 💻	Yucho Ho 💻
Jeremiah Zucker ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!