Installation

Vite

Install and configure Brutalist UI for Vite + React projects.

CLI Installation

Copy & Customize

Copy components into your project for full customization.

1. Create Vite project (if new)

pnpm create vite@latest my-app --template react-ts

2. Setup path aliases in vite.config.ts

vite.config.ts
import path from "path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

3. Update tsconfig.json

tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

4. Run init command

pnpm dlx brutx@latest init

5. Add components

pnpm dlx brutx@latest add button card badge

6. Use components

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

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

export default App;
Next.jsManual