Brutalist UI

A Neo-Brutalism styled React UI component library

Bold. Raw. Unapologetic.

Documentation · NPM Package · Report Bug

---

---

💖 Support This Project

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

Your support helps keep this project alive and growing! 🚀

---

✨ Features

Feature	Description
🎨 Neo-Brutalism Design	Bold 3px borders, offset shadows, vibrant colors
🧱 22+ Components	Comprehensive UI kit for modern applications
🌙 Dark Mode	Full dark mode support out of the box
♿ Accessible	Built on Radix UI primitives for A11y
📱 Responsive	Mobile-first, responsive design
🎯 TypeScript	Full type safety and IntelliSense
🎨 Tailwind CSS	Custom plugin with brutalism utilities
⚡ Tree-shakeable	Import only what you need

📦 Installation

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

🚀 Quick Start

1. Initialize Project

npx brutx@latest init

This will:

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

2. Add Components

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

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

3. Use Components

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>
    );
}

🧩 Components

Layout & Containers

Component	Description
Card	Container with header, content, footer sections
Separator	Visual divider between content

Forms & Inputs

Component	Description
Button	Primary, secondary, outline, ghost, destructive variants
Input	Text input with brutalist styling
Textarea	Multi-line text input
Checkbox	Toggle checkbox with checkmark
Switch	Toggle switch control
Select	Dropdown select menu
Label	Form input labels

Feedback & Status

Component	Description
Alert	Info, success, warning, error notifications
Badge	Status indicators and labels
Toast	Toast notifications system
Spinner	Loading spinners (brutalist, dots, pulse, bars)
Skeleton	Loading placeholder animations

Overlay & Popups

Component	Description
Dialog	Modal dialog windows
Popover	Floating content panels
Tooltip	Hover tooltips
DropdownMenu	Context and dropdown menus

Navigation & Data

Component	Description
Tabs	Tabbed content navigation
Table	Data tables with brutalist styling
Pagination	Page navigation with first/last, prev/next
Avatar	User avatars with fallback

🎨 Tailwind Plugin Utilities

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 */

Color Palette

Color	Hex	Usage
🔴 Coral Red	#FF6B6B	Primary actions, destructive
🟢 Teal	#4ECDC4	Success, secondary
🟡 Yellow	#FFE66D	Warning, highlights
⚫ Black	#000000	Borders, text
⚪ White	#FFFFFF	Backgrounds

🏗️ Project Structure

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

🛠️ Development

# 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

Scripts

Command	Description
pnpm --filter brutalist-ui build	Build the library
pnpm --filter brutalist-ui dev	Watch mode
pnpm --filter docs dev	Start docs server
pnpm --filter docs build	Build docs for production

📄 License

MIT © dev-snake

---

🗺️ Roadmap

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

💎 Pro Components (Coming Soon)

Premium components for serious projects:

Component	Description	Status
DataTable Pro	Advanced data table with sorting, filtering, pagination	🔜 Soon
DatePicker	Date & time picker with range selection	🔜 Soon
Drawer	Slide-out panel component	🔜 Soon
Command Palette	Spotlight-style command menu	🔜 Soon
Dashboard Kit	Complete admin dashboard template	🔜 Soon

---

💖 Sponsors

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

---

Made with 💛 and bold borders

NPM • GitHub • Docs