Installation

Manual Installation

Add Brutalist UI components manually to any React project.

CLI Installation

Recommended

Use the CLI to copy components into your project.

1. Run init command

pnpm dlx brutx@latest init

2. Add components

pnpm dlx brutx@latest add button card dialog

Or add all components: npx brutx@latest add --all

3. Use components

tsx
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

function MyComponent() {
  return (
    <Card>
      <CardContent>
        <Button variant="primary">Click me</Button>
      </CardContent>
    </Card>
  );
}

Manual Copy

Alternative

If you prefer to copy files manually, follow these steps.

1. Prerequisites

Make sure Tailwind CSS is installed in your project. Follow the Tailwind CSS installation →

2. Install dependencies

pnpm add clsx tailwind-merge class-variance-authority lucide-react

3. Create utils.ts

lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

4. Configure tailwind.config.js

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      borderWidth: {
        3: "3px",
      },
      boxShadow: {
        brutal: "4px 4px 0px 0px #000",
        "brutal-sm": "2px 2px 0px 0px #000",
        "brutal-lg": "6px 6px 0px 0px #000",
      },
    },
  },
};

5. Add base styles to your CSS

globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Brutalist UI utility classes */
@layer utilities {
  .border-3 {
    border-width: 3px;
  }
  
  .shadow-brutal {
    box-shadow: 4px 4px 0px 0px #000;
  }
  
  .shadow-brutal-sm {
    box-shadow: 2px 2px 0px 0px #000;
  }
  
  .shadow-brutal-lg {
    box-shadow: 6px 6px 0px 0px #000;
  }
}

/* Dark mode shadows */
.dark .shadow-brutal {
  box-shadow: 4px 4px 0px 0px #fff;
}

.dark .shadow-brutal-sm {
  box-shadow: 2px 2px 0px 0px #fff;
}

.dark .shadow-brutal-lg {
  box-shadow: 6px 6px 0px 0px #fff;
}

6. Copy components from GitHub

Copy the component files to your components/ui folder:

Browse components on GitHub

Recommended Structure

src/
├── components/
│   └── ui/
│       ├── button.tsx
│       ├── card.tsx
│       ├── dialog.tsx
│       └── ...
└── lib/
    └── utils.ts

Component Dependencies

Some components require additional Radix UI packages:

ComponentDependencies
Button@radix-ui/react-slot
Dialog@radix-ui/react-dialog
Select@radix-ui/react-select
Dropdown@radix-ui/react-dropdown-menu
Calendarreact-day-picker, date-fns
Commandcmdk

Usage Example

tsx
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export default function App() {
  return (
    <div className="p-8">
      <Card variant="default" padding="default">
        <CardHeader>
          <CardTitle>Welcome!</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="mb-4">This is a brutalist card.</p>
          <div className="flex gap-2">
            <Button variant="primary">Primary</Button>
            <Button variant="secondary">Secondary</Button>
            <Button variant="outline">Outline</Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
ViteCLI Reference