MacawUI

Official React UI components kit for Saleor — an open-source GraphQL-first and Next.js ready e-commerce platform. You can find most of the elements used in the creation of Saleor's dashboard interface and use it to create Saleor Apps. Have a great time working on your projects and empowering your users. If you have any questions, feel free to let us know on GitHub Discussions.

Installation

npm i @saleor/macaw-ui

Note that this package depends on the following Material-UI v4 packages: @material-ui/core, @material-ui/icons and @material-ui/lab. If your project doesn't have them installed and you're not using npm v7 with automatically installed peer dependencies then you'll need to install them manually:

npm i @material-ui/core @material-ui/icons @material-ui/lab

Documentation

Take a look at our storybook docs. You can find guides, component overview, and project ideas there.

Development

To begin, you need to install dependencies:

npm install

We use husky to provide precommit and prepush git hooks:

npx husky install

To develop our components we utilize Storybook which is playing very nicely with our development flow. To run storybook's developer server run:

npm run storybook

Working with Material-UI

MacawUI was created to integrate with Material-UI seamlessly. It exports a ThemeProvider that will override Material-UI component styles:

import { ThemeProvider } from "@saleor/macaw-ui";

// ...

<ThemeProvider>
  <App />
</ThemeProvider>

License

Distributed under the Creative Common Attribution 4.0 International License https://creativecommons.org/licenses/by/4.0/

Thanks

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.