https://github.com/saleor/macaw-ui
MacawUI: an official UI design kit for Saleor
https://github.com/saleor/macaw-ui
hacktoberfest react react-components typescript
Last synced: about 1 year ago
JSON representation
MacawUI: an official UI design kit for Saleor
- Host: GitHub
- URL: https://github.com/saleor/macaw-ui
- Owner: saleor
- License: other
- Created: 2019-07-26T10:14:02.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2025-06-03T06:24:02.000Z (about 1 year ago)
- Last Synced: 2025-06-10T06:39:20.678Z (about 1 year ago)
- Topics: hacktoberfest, react, react-components, typescript
- Language: TypeScript
- Homepage: https://macaw-ui.vercel.app
- Size: 12.3 MB
- Stars: 108
- Watchers: 21
- Forks: 32
- Open Issues: 46
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@saleor/macaw-ui)
[](https://www.npmjs.com/package/@saleor/macaw-ui)
[](https://bundlephobia.com/package/@saleor/macaw-ui@latest)
# MacawUI
Official React UI components kit for [Saleor](https://saleor.io/) — 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](https://github.com/mirumee/saleor/discussions).
## Installation
```sh
npm i @saleor/macaw-ui
```
## Usage
You need to import the styles into your app. You can do it in your main entry point, for example `index.`tsx`:
```tsx
import "@saleor/macaw-ui/style";
```
Next, you need to add the `ThemeProvider` to your app. It will provide the theme to the components:
```tsx
import { ThemeProvider } from "@saleor/macaw-ui";
const App = () => (
);
```
### Usage with Next.js
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`:
```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 (
);
}
}
```
### Usage with form libraries
#### React Hook Form
You need to wrap the MacawUI component with [`Controller`](https://react-hook-form.com/api/usecontroller/controller/). For example:
```tsx
import { Input } from "@saleor/macaw-ui";
}
/>;
```
### Usage with Sentry
Add following configuration to `Sentry.Integrations.Breadcrumbs`:
```js
{
dom: {
serializeAttribute: ["macaw-ui-component"];
}
}
```
Right now sentry will display MacawUI components names in breadcrumbs.
### Development
To begin, you need to install dependencies:
```sh
pnpm install
```
Then, you can run the Storybook:
```sh
pnpm dev
```
You can run build in watch mode (useful for real-time development with e.g Dashboard):
```sh
pnpm watch
```
When you finish woking, you can add new changeset
```sh
pnpm change:add
```
### Useful tooling
- Chrome browser extension - [Atomic CSS Devtools](https://chromewebstore.google.com/detail/atomic-css-devtools/cbjhfeooiomphlikkblgdageenemhpgc)
## License
Distributed under the Creative Common Attribution 4.0 International License
[https://creativecommons.org/licenses/by/4.0/](https://creativecommons.org/licenses/by/4.0/)
## Thanks
Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.