Installation

Next.js

Install and configure Brutalist UI for Next.js (App Router or Pages Router).

CLI Installation

Copy & Customize

Copy components to your project for full customization control.

1. Run init command

This creates components.json, sets up directories, and installs dependencies.

pnpm dlx brutx@latest init

2. Add components

pnpm dlx brutx@latest add button card badge

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

3. Import from your project

app/page.tsx
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';

export default function Home() {
  return (
    <main className="p-8">
      <Card>
        <CardContent>
          <Badge variant="accent" className="mb-4">Welcome</Badge>
          <h1 className="text-2xl font-black mb-4">Hello Brutalist UI!</h1>
          <Button variant="primary">Get Started</Button>
        </CardContent>
      </Card>
    </main>
  );
}

Project Structure

your-project/
├── components.json
├── src/
│   ├── components/
│   │   └── ui/
│   │       ├── button.tsx
│   │       ├── card.tsx
│   │       └── ...
│   └── lib/
│       └── utils.ts

Dark Mode

Brutalist UI supports dark mode out of the box. Add next-themes for easy theme switching:

pnpm add next-themes
app/providers.tsx
'use client';

import { ThemeProvider } from 'next-themes';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      {children}
    </ThemeProvider>
  );
}
InstallationVite