Installation

Manual Installation

Add Brutx 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;

@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 .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