mfrachet/design-system

Strapi.io's design system :rocket:

Documentation|Try components

Welcome! 👋👋👋

Strapi Design System provides guidelines and tools to help anyone make Strapi's contributions more cohesive and to build plugins more efficiently.

Installation

Install Strapi Design System and its peer dependencies:

$ yarn add @strapi/design-system @strapi/icons styled-components react-router-dom

# or

$ npm i @strapi/design-system @strapi/icons styled-components react-router-dom

Usage

Wrap your application with the ThemeProvider and pass the default lightTheme provided by @strapi/design-system.

import { ThemeProvider } from "@strapi/design-system/ThemeProvider";
import { lightTheme } from "@strapi/design-system/themes";

function App({ children }) {
  return <ThemeProvider theme={lightTheme}>{children}</ThemeProvider>;
}

export default App;

Testing a specific branch

Make sure to have the project already cloned (see previous point). Then, run the following commands:

# Inside the folder
$ git checkout BRANCH_NAME # BRANCH_NAME concerns the modifications to tests
$ yarn setup # reinstall dependencies & prepare lerna packages

If you encounter problems doing so, run the following command and retry the previous one:

$ git reset --hard