{"id":29095760,"url":"https://github.com/saleor/macaw-ui","last_synced_at":"2025-06-28T11:08:39.439Z","repository":{"id":38832393,"uuid":"198995767","full_name":"saleor/macaw-ui","owner":"saleor","description":"MacawUI: an official UI design kit for Saleor","archived":false,"fork":false,"pushed_at":"2025-06-03T06:24:02.000Z","size":12862,"stargazers_count":108,"open_issues_count":46,"forks_count":32,"subscribers_count":21,"default_branch":"main","last_synced_at":"2025-06-10T06:39:20.678Z","etag":null,"topics":["hacktoberfest","react","react-components","typescript"],"latest_commit_sha":null,"homepage":"https://macaw-ui.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/saleor.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-07-26T10:14:02.000Z","updated_at":"2025-05-14T13:49:44.000Z","dependencies_parsed_at":"2024-01-22T09:50:54.022Z","dependency_job_id":"92d48411-0456-45e3-8590-feeb8cfc1c26","html_url":"https://github.com/saleor/macaw-ui","commit_stats":{"total_commits":748,"total_committers":21,"mean_commits":35.61904761904762,"dds":0.606951871657754,"last_synced_commit":"c8ecc41ea24be8fdc0661a930258eddb0b26d9b1"},"previous_names":["mirumee/macaw-ui"],"tags_count":148,"template":false,"template_full_name":null,"purl":"pkg:github/saleor/macaw-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saleor%2Fmacaw-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saleor%2Fmacaw-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saleor%2Fmacaw-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saleor%2Fmacaw-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saleor","download_url":"https://codeload.github.com/saleor/macaw-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saleor%2Fmacaw-ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260415057,"owners_count":23005500,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","react","react-components","typescript"],"created_at":"2025-06-28T11:08:38.399Z","updated_at":"2025-06-28T11:08:39.434Z","avatar_url":"https://github.com/saleor.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://macaw-ui-next.vercel.app/\" rel=\"noopener\" target=\"_blank\"\u003e\u003cimg src=\"./logo.svg\" alt=\"MacawUI logo\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n[![npm package](https://img.shields.io/npm/v/@saleor/macaw-ui.svg)](https://www.npmjs.com/package/@saleor/macaw-ui)\n[![npm download](https://img.shields.io/npm/dm/@saleor/macaw-ui.svg)](https://www.npmjs.com/package/@saleor/macaw-ui)\n[![Bundle Size](https://badgen.net/bundlephobia/minzip/@saleor/macaw-ui)](https://bundlephobia.com/package/@saleor/macaw-ui@latest)\n\n\u003c/div\u003e\n\n# MacawUI\n\nOfficial 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).\n\n## Installation\n\n```sh\nnpm i @saleor/macaw-ui\n```\n\n## Usage\n\nYou need to import the styles into your app. You can do it in your main entry point, for example `index.`tsx`:\n\n```tsx\nimport \"@saleor/macaw-ui/style\";\n```\n\nNext, you need to add the `ThemeProvider` to your app. It will provide the theme to the components:\n\n```tsx\nimport { ThemeProvider } from \"@saleor/macaw-ui\";\n\nconst App = () =\u003e (\n  \u003cThemeProvider\u003e\n    \u003cApp /\u003e\n  \u003c/ThemeProvider\u003e\n);\n```\n\n### Usage with Next.js\n\nIf 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`:\n\n```tsx\nimport { getCSSVariables } from \"@saleor/macaw-ui\";\nimport Document, { Head, Html, Main, NextScript } from \"next/document\";\n\nconst css = getCSSVariables(\"defaultLight\"); // or \"defaultDark\"\n\nexport default class AppDocument extends Document {\n  render() {\n    return (\n      \u003cHtml style={css}\u003e\n        \u003cHead /\u003e\n        \u003cbody\u003e\n          \u003cMain /\u003e\n          \u003cNextScript /\u003e\n        \u003c/body\u003e\n      \u003c/Html\u003e\n    );\n  }\n}\n```\n\n### Usage with form libraries\n\n#### React Hook Form\n\nYou need to wrap the MacawUI component with [`Controller`](https://react-hook-form.com/api/usecontroller/controller/). For example:\n\n```tsx\nimport { Input } from \"@saleor/macaw-ui\";\n\n\u003cController\n  control={control}\n  name=\"name-input\"\n  render={({ field }) =\u003e \u003cInput {...field} /\u003e}\n/\u003e;\n```\n\n### Usage with Sentry\n\nAdd following configuration to `Sentry.Integrations.Breadcrumbs`:\n\n```js\n{\n  dom: {\n    serializeAttribute: [\"macaw-ui-component\"];\n  }\n}\n```\n\nRight now sentry will display MacawUI components names in breadcrumbs.\n\n### Development\n\nTo begin, you need to install dependencies:\n\n```sh\npnpm install\n```\n\nThen, you can run the Storybook:\n\n```sh\npnpm dev\n```\n\nYou can run build in watch mode (useful for real-time development with e.g Dashboard):\n\n```sh\npnpm watch\n```\n\nWhen you finish woking, you can add new changeset\n\n```sh\npnpm change:add\n```\n\n### Useful tooling\n\n- Chrome browser extension - [Atomic CSS Devtools](https://chromewebstore.google.com/detail/atomic-css-devtools/cbjhfeooiomphlikkblgdageenemhpgc)\n\n## License\n\nDistributed under the Creative Common Attribution 4.0 International License\n[https://creativecommons.org/licenses/by/4.0/](https://creativecommons.org/licenses/by/4.0/)\n\n## Thanks\n\n\u003ca href=\"https://www.chromatic.com/\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png\" width=\"153\" height=\"30\" alt=\"Chromatic\" /\u003e\u003c/a\u003e\n\nThanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaleor%2Fmacaw-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaleor%2Fmacaw-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaleor%2Fmacaw-ui/lists"}