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
You need to import the styles into your app. You can do it in your main entry point, for example index.
tsx`:
import "@saleor/macaw-ui/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";
const App = () => (
<ThemeProvider>
<App />
</ThemeProvider>
);
If you need to render styles on the server we recommend that you use getCSSVariables
helper to get the CSS variables that can be injected in _document.tsx
:
import { getCSSVariables } from "@saleor/macaw-ui";
import Document, { Head, Html, Main, NextScript } from "next/document";
const css = getCSSVariables("defaultLight"); // or "defaultDark"
export default class AppDocument extends Document {
render() {
return (
<Html style={css}>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
You need to wrap the MacawUI component with Controller
. For example:
import { Input } from "@saleor/macaw-ui";
<Controller
control={control}
name="name-input"
render={({ field }) => <Input {...field} />}
/>;
Add following configuration to Sentry.Integrations.Breadcrumbs
:
{
dom: {
serializeAttribute: ["macaw-ui-component"];
}
}
Right now sentry will display MacawUI components names in breadcrumbs.
To begin, you need to install dependencies:
pnpm install
Then, you can run the Storybook:
pnpm dev
You can run build in watch mode (useful for real-time development with e.g Dashboard):
pnpm watch
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.