Documentation

Getting Started

Brutalist UI is a React component library that brings the bold, blocky aesthetic of Neo-Brutalism to your web applications. Built on top of Radix UI primitives and styled with Tailwind CSS.

What is Neo-Brutalism?

Neo-Brutalism (also known as Neubrutalism) is a design trend characterized by:

  • Bold borders - Thick, solid black outlines (3px)
  • Offset shadows - Hard shadows offset 4-8px
  • No rounded corners - Sharp, rectangular shapes
  • Heavy typography - Bold, black weight fonts (font-weight: 900)
  • Vibrant colors - High contrast, saturated palettes
  • Pressable feel - Interactive states that feel tangible

How to Use

Use the CLI to add Brutalist UI components to your project:

CLI Tool

Recommended

Copy components into your codebase for full control and customization.

npx brutx@latest init
npx brutx@latest add button card
import { Button } from '@/components/ui/button'

Why Brutalist UI?

Accessible

Built on Radix UI primitives with full keyboard navigation and screen reader support.

Customizable

class-variance-authority (cva) for variants. Tailwind CSS utilities for easy styling.

Modern Stack

TypeScript first, tree-shakeable, React 18/19+, Next.js 14/15+ compatible.

27

Components

Button, Card, Dialog, Calendar, Command, Toast, Table, and many more.

Design Tokens

The brutalism style is achieved through these core design tokens:

TokenCSSDescription
border-3border-width: 3pxThick border for brutalist look
shadow-brutalbox-shadow: 4px 4px 0 #000Hard offset shadow
font-blackfont-weight: 900Heavy typography
Colors#FF6B6B, #4ECDC4, #FFE66DPrimary, Secondary, Accent

Quick Example

// Using CLI-copied components
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';

function MyComponent() {
  return (
    <Card variant="default" padding="default">
      <CardContent>
        <h2 className="font-black text-xl mb-4">Welcome!</h2>
        <Button variant="primary">Get Started</Button>
        <Button variant="secondary" className="ml-2">Learn More</Button>
      </CardContent>
    </Card>
  );
}

Next Steps