A CLI toolbox for creating design systems in minutes

Uses: Typescript, CSS, styled-components support

Outputs: CJS and MJS

No tooling configuration required

<br />

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

star: Build your components for multiple outputs (cjs and esm)

star: Write styles with styled-components or css-modules

star: Craft excellent components using Storybook

star: Let component consumer try your components with playroom

star: Testing and linting support

star: Typescript supported out of the box

star: 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

If node-gyp throws errors during installation, installation may still be successful

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):

<table>
<tr>
<td align="center"><a href="https://adamdierkens.com">

<br />_{<b>Adam Dierkens</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=adierkens" title="Code">💻</a> <a href="#design-adierkens" title="Design">🎨</a> <a href="#ideas-adierkens" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=adierkens" title="Documentation">📖</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=adierkens" title="Tests">⚠️</a></td>
<td align="center"><a href="http://hipstersmoothie.com">

<br />_{<b>Andrew Lisowski</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=hipstersmoothie" title="Code">💻</a> <a href="#design-hipstersmoothie" title="Design">🎨</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=hipstersmoothie" title="Documentation">📖</a> <a href="#ideas-hipstersmoothie" title="Ideas, Planning, & Feedback">🤔</a> <a href="#infra-hipstersmoothie" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=hipstersmoothie" title="Tests">⚠️</a></td>
<td align="center"><a href="http://tylerkrupicka.com">

<br />_{<b>Tyler Krupicka</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=tylerkrupicka" title="Code">💻</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=tylerkrupicka" title="Documentation">📖</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=tylerkrupicka" title="Tests">⚠️</a></td>
<td align="center"><a href="https://github.com/kendallgassner">

<br />_{<b>Kendall Gassner</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=kendallgassner" title="Code">💻</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=kendallgassner" title="Documentation">📖</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=kendallgassner" title="Tests">⚠️</a></td>
<td align="center"><a href="https://github.com/kharrop">

<br />_{<b>Kelly Harrop</b>}</a><br /><a href="#design-kharrop" title="Design">🎨</a></td>
<td align="center"><a href="http://peter.mikit.sh">

<br />_{<b>Peter Mikitsh</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=petermikitsh" title="Documentation">📖</a></td>
<td align="center"><a href="https://renovate.whitesourcesoftware.com">

<br />_{<b>WhiteSource Renovate</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=renovate-bot" title="Code">💻</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=renovate-bot" title="Tests">⚠️</a></td>
</tr>
<tr>
<td align="center"><a href="https://github.com/mishavp2001">

<br />_{<b>mishavp2001</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=mishavp2001" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/vasikarla">

<br />_{<b>Raj Vasikarla</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=vasikarla" title="Code">💻</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=vasikarla" title="Documentation">📖</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=vasikarla" title="Tests">⚠️</a></td>
<td align="center"><a href="http://uptrend.tech">

<br />_{<b>Brandon Orther</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=orther" title="Documentation">📖</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=orther" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/alan-cruz2">

<br />_{<b>alan-cruz2</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=alan-cruz2" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/hainessss">

<br />_{<b>hainessss</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=hainessss" title="Code">💻</a></td>
<td align="center"><a href="http://athityakumar.github.io/">

<br />_{<b>Athitya Kumar</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=athityakumar" title="Code">💻</a></td>
<td align="center"><a href="https://jasonrundell.com/">

<br />_{<b>Jason Rundell (he/him)</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=jasonrundell" title="Documentation">📖</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=jasonrundell" title="Tests">⚠️</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=jasonrundell" title="Code">💻</a></td>
</tr>
<tr>
<td align="center"><a href="https://github.com/reubenae">

<br />_{<b>Reuben</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=reubenae" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/vzsky">

<br />_<b>my99N</b></a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=vzsky" title="Documentation">📖</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=vzsky" title="Tests">⚠️</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=vzsky" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/anjaliguptaz">

<br />_{<b>anjaliguptaz</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=anjaliguptaz" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/chaopan">

<br />_{<b>chaopan</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=chaopan" title="Tests">⚠️</a></td>
<td align="center"><a href="https://github.com/Talor-A">

<br />_{<b>Talor Anderson</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=Talor-A" title="Code">💻</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=Talor-A" title="Documentation">📖</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=Talor-A" title="Tests">⚠️</a></td>
<td align="center"><a href="https://github.com/spentacular">

<br />_{<b>Spencer Hamm</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=spentacular" title="Code">💻</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=spentacular" title="Documentation">📖</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=spentacular" title="Tests">⚠️</a></td>
<td align="center"><a href="https://github.com/amalik2">

<br />_{<b>Adil Malik</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=amalik2" title="Tests">⚠️</a></td>
</tr>
<tr>
<td align="center"><a href="https://github.com/salilbc">

<br />_{<b>Salil Cuncoliencar</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=salilbc" title="Documentation">📖</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=salilbc" title="Tests">⚠️</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=salilbc" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/GauravKesarwani">

<br />_{<b>Gaurav Kesarwani</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=GauravKesarwani" title="Documentation">📖</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=GauravKesarwani" title="Tests">⚠️</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=GauravKesarwani" title="Code">💻</a></td>
<td align="center"><a href="https://nicolas-hoizey.com/">

<br />_{<b>Nicolas Hoizey</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=nhoizey" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/hborawski">

<br />_{<b>Harris Borawski</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=hborawski" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/fattslug">

<br />_{<b>Sean Powell</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=fattslug" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/melindali255">

<br />_{<b>melindali255</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=melindali255" title="Documentation">📖</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=melindali255" title="Tests">⚠️</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=melindali255" title="Code">💻</a></td>
<td align="center"><a href="https://yuchoho.com/">

<br />_{<b>Yucho Ho</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=yucho" title="Code">💻</a></td>
</tr>
<tr>
<td align="center"><a href="https://github.com/sugarmanz">

<br />_{<b>Jeremiah Zucker</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=sugarmanz" title="Tests">⚠️</a></td>
<td align="center"><a href="https://github.com/abdelgzali">

<br />_{<b>Abd El-Ghazali</b>}</a><br /><a href="https://github.com/intuit/design-systems-cli/commits?author=abdelgzali" title="Documentation">📖</a> <a href="https://github.com/intuit/design-systems-cli/commits?author=abdelgzali" title="Code">💻</a></td>
</tr>
</table>

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