Product
Announcing Socket Certified Patches: One-Click Fixes for Vulnerable Dependencies
A safer, faster way to eliminate vulnerabilities without updating dependencies
By Mikola Lysenko, Jordan Harband, Jonah Ghebremichael - Nov 18, 2025
🚀 DAY 2 OF LAUNCH WEEK: Announcing Socket Certified Patches: One-Click Fixes for Vulnerable Dependencies.Learn more →
@saleor/macaw-ui
Advanced tools
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
Usage
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>
);
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:
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>
);
}
}
Usage with form libraries
React Hook Form
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} />}
/>;
Usage with Sentry
Add following configuration to Sentry.Integrations.Breadcrumbs:
{
dom: {
serializeAttribute: ["macaw-ui-component"];
}
}
Right now sentry will display MacawUI components names in breadcrumbs.
Development
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
When you finish woking, you can add new changeset
pnpm change:add
Useful tooling
- Chrome browser extension - Atomic CSS Devtools
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.
1.3.5
Patch Changes
- 2f59ff1: Fixed Accordion overflow issue by setting
overflow: visibleon open content to ensure content displays correctly.
FAQs
Saleor's UI component library
We found that @saleor/macaw-ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 10 open source maintainers collaborating on the project.
Package last updated on 02 Oct 2025
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Product
Reachability for Ruby Now in Beta
Reachability analysis for Ruby is now in beta, helping teams identify which vulnerabilities are truly exploitable in their applications.
By Oskar Haarklou Veileborg - Nov 17, 2025
Research
/Security News
npm Malware Campaign Uses Adspect Cloaking to Deliver Malicious Redirects
Malicious npm packages use Adspect cloaking and fake CAPTCHAs to fingerprint visitors and redirect victims to crypto-themed scam sites.
By Olivia Brown - Nov 17, 2025