> Documentation index: [Saleor](/llms.txt) · [This section](/developer/llms.txt) > Source: https://docs.saleor.io/developer/extending/apps/developing-apps/macaw-ui # MacawUI Official React UI components kit for Saleor. 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/saleor/macaw-ui/discussions). Visit our [Storybook](https://macaw-ui.vercel.app) to explore token values and component usage. ## Installation and usage ```bash 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`: ```tsx import "@saleor/macaw-ui/style"; ``` Next, 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 react-hook-form You need to wrap the MacawUI component with [Controller](https://react-hook-form.com/docs/usecontroller/controller). For example: ```tsx import { Input } from "@saleor/macaw-ui"; } />; ```