BrutalUI

https://brutalui.dev

Introduction

BrutalUI is a collection of brutalist-styled components based on shadcn/ui.

What you get

• 70+ shadcn/ui components with brutalist styling
• Themeable tokens + multiple vibes
• Copy/paste workflow or shadcn registry install
• Next.js + React 19 ready

Quick start (usage)

1. Start with a Tailwind + React app (Next.js or Vite).
2. Initialize shadcn:

npx shadcn@latest init

3. Add components:

npx shadcn@latest add https://brutalui.dev/r/button.json

Or copy/paste directly from the docs.

Usage (copy/paste)

Grab the component from the docs and paste it into your project.

import { Button } from "@/components/ui/button"

export default function Example() {
  return <Button>Brutal Button</Button>
}

Usage (shadcn registry)

npx shadcn@latest add https://brutalui.dev/r/button.json

Examples

Accordion:

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

export default function Example() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Card:

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>BrutalUI Card</CardTitle>
      </CardHeader>
      <CardContent>Sharp edges. Loud shadows.</CardContent>
    </Card>
  )
}

Registry deployment

If you update components, regenerate the registry files:

npm run registry:generate
npm run registry:build

Documentation

Visit docs to get started.

About

I created this collection of components for people who want to learn more about brutalist style and to help them get started with creating brutalist layouts.

License

MIT

Inspired by neobrutalism-components.