Brutalist UI

A Neo-Brutalism styled React UI component library

Bold. Raw. Unapologetic.

Documentation · NPM Package · Report Bug

If you find Brutalist UI useful, please consider supporting its development:

Your support helps keep this project alive and growing! 🚀

Use the CLI to add components to your project:

# Initialize your project
npx brutx@latest init

# Add components
npx brutx@latest add button card badge

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

npx brutx@latest init

This will:

• Create components.json configuration
• Set up your components directory
• Install required dependencies

# Add specific components
npx brutx@latest add button card dialog

# Add all components at once
npx brutx@latest add --all

import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';

function App() {
    return (
        <Card>
            <CardHeader>
                <h2>Welcome to Brutalist UI</h2>
                <Badge variant="success">New</Badge>
            </CardHeader>
            <CardContent>
                <p>Bold, raw, and beautiful components.</p>
                <Button variant="primary" size="lg">
                    Get Started
                </Button>
            </CardContent>
        </Card>
    );
}

The brutalism plugin adds these utilities:

.nb-border    /* 3px solid black border */
/* 3px solid black border */
/* 3px solid black border */
/* 3px solid black border */
/* 3px solid black border */
/* 3px solid black border */
/* 3px solid black border */
/* 3px solid black border */
/* 3px solid black border */
/* 3px solid black border */
/* 3px solid black border */
/* 3px solid black border */
/* 3px solid black border */
/* 3px solid black border */
/* 3px solid black border */
/* 3px solid black border */
.nb-shadow    /* 4px offset shadow */
.nb-shadow-sm /* 2px offset shadow */
.nb-shadow-lg /* 6px offset shadow */
.nb-press     /* Pressed state effect */
.nb-font; /* Bold 900 weight typography */

brutalist-ui/
├── apps/
│   └── docs/              # Next.js 14 documentation site
│       ├── app/           # App router pages
│       ├── components/    # Doc site components
│       └── public/        # Static assets
├── packages/
│   └── ui/                # UI component library
│       ├── src/
│       │   ├── components/  # 22 React components
│       │   ├── lib/         # Utilities (cn, etc.)
│       │   └── brutalism-plugin.ts
│       └── dist/          # Built output
├── pnpm-workspace.yaml
└── package.json

# Clone the repository
git clone https://github.com/dev-snake/brutalist-ui.git
cd brutalist-ui

# Install dependencies
pnpm install

# Build the UI library
pnpm --filter brutalist-ui build

# Start docs dev server
pnpm --filter docs dev

MIT © dev-snake

We're constantly improving Brutalist UI. Here's what's coming:

• Core components (22+ components)
• Dark mode support
• TypeScript support
• Tailwind CSS plugin
• More components: DatePicker, DataTable, Drawer, Command Palette
• Animations: Framer Motion integration
• Themes: Multiple brutalist color themes
• Templates: Dashboard, Landing page, Admin panel
• Figma Kit: Design files for designers

Premium components for serious projects:

Support the development of Brutalist UI and get your name/logo here!