Installing BrutalizmUI in Your React Project
A step-by-step guide to setting up and installing BrutalizmUI neobrutalism components.
Installing BrutalizmUI is a straightforward process that integrates seamlessly with your existing Shadcn/ui and Tailwind CSS 4 setup. You can add components programmatically using the Shadcn CLI or manually by copying the source code into your project.
1. Initialize shadcn/ui
As explained in the introduction, most of these components are based on Shadcn UI.
Visit shadcn docs to see how to initialize shadcn.
2. Configure Global Styling
Delete the existing styling from your globals.css and paste desired styling. This ensures your project adopts the core neobrutalism CSS variables and base styles.
3. Deploy Components
Installation via Shadcn CLI
Just choose desired component variant and desired package manager, copy cli command to your terminal and you're good to go. If there is no shadcn cli command on the component page you'll have to install the component manually.
Manual Component Installation
In the docs below each component's name you'll have the shadcn docs link for that component.
e.g. You want to install shadcn button component. You'll navigate to button page, click on the shadcn docs link and install the button component like it's shown in the docs.
After you're done you'll come back to the BrutalizmUI button page, and copy button component to your project inside components/ui/button.tsx
(this is the default component path) or your custom component path.
Keep in mind that BrutalizmUI can have different variants than default shadcn components.
Other components
If the shadcn docs link is not present on the component's page, just copy the component and read the instructions if there are any.