Install for development

Requirements :

  • node v20+
  • yarn

To install node:

Please follow this guide

To install yarn :

npm i -g yarn

Development :

Note about the project architecture

The project use a monorepo architecture using lerna. Lerna help us to manage the distribution and the versioning of multiple packages into the same repository. It also create symlink between the individual packages nodes_modules so they can be used in one another as npm dependencies.

When releasing the design system, lerna will automatically generate changelogs for the global/parent repo, as well as for the individual packages and select a version number based on the commit syntax. It's why it is very important that you follow the contributing guidelines.

Please read the docs to learn more about it.

Clone the repo and start the development environment

Clone the repo :

git clone

Move to the repo:

cd mozaic-design-system

Install dependencies and create symlink between packages:

yarn lerna

Add a github personal access tokens : follow those instruction and select repo as a scope for you personal access token. Copy your token in your clipboard

Create a .env file at the root of the project and add the following (replacing XXX by your token):


Lunch the dev server:

yarn develop

Targeting compillation of selected previews directory

Compiling previews take a long time, and most of the time you need only to compile the previews you are working on.

To target only previews contained in a directory, add a preview parameter to the develop command containing a path relative to src/pages/:

yarn develop previews=Components/Buttons

Lint and fix your css files using stylelint

yarn css:fix

Please note that stylelint is not able to fix everything, so run

yarn css:lint

and make the required changes.

stylelint fix and lint are run at pre-commit, so you can't commit uggly stuffs ;).

Create a production build :

yarn build


If you want more explanation, please go to the related wiki page.


Each branch is deployed when creating a Pull Request. A view deployment button is displayed into the Pull Request's timeline at the bottom.