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.

npm i @saleor/macaw-ui

Note that this package still bundles old version of MacawUI so it still 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

You need to import the styles in your app. You can do it in your main entry point, for example index.tsx:

import "@saleor/macaw-ui/next/style";

Next, you need to add the ThemeProvider to your app. It will provide the theme to the components:

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

const App = () => (
  <ThemeProvider>
    <App />
  </ThemeProvider>
);

As mentioned above, we still bundle old version of MacawUI so you need to add the following to your next.config.js:

/** @type {import('next').NextConfig} */
module.exports = {
  experimental: {
    esmExternals: false,
  },
};

It tells Next.js not to use ESM exports for external modules. This is needed because MacawUI dependencies (Material-UI v4) are still using CommonJS exports.

To begin, you need to install dependencies:

pnpm install

Then, you can run the Storybook:

pnpm dev

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

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