BrutalButton is a NeoBrutalism style component. It features thick borders, high contrast colors, and a sharp shadow that vanishes on press to create a satisfying physical push effect.

Preview

BrutalButton

Interactive

Custom Variant

You can easily override the default theme-aware colors to create your own flavor of neobrutalism.

Custom Colors

Interactive

Install

Add the item with the shadcn CLI.

npx shadcn@latest add @evilbuttons/brutal-button

Usage

[]txt

import { BrutalButton } from "@/components/evil-buttons/brutal-button";

export function ButtonDemo() {
  return (
    <BrutalButton>
      Launch
    </BrutalButton>
  );
}

Props

Prop	Type	Default	Description
`color`	`string`	`var(--background)`	Background color of the button.
`textColor`	`string`	`var(--foreground)`	Text color of the button.
`hasBorder`	`boolean`	`true`	Toggle the border.
`borderColor`	`string`	`var(--foreground)`	Color of the border.
`hasShadow`	`boolean`	`true`	Toggle the sharp shadow.
`shadowColor`	`string`	`var(--foreground)`	Color of the shadow.
`className`	`string`	-	Extra classes passed to the wrapper.
`children`	`React.ReactNode`	-	The visible button label or content.

Registry

The registry item includes components/evil-buttons/brutal-button.tsx and installs clsx and tailwind-merge as dependencies. The component imports cn from @/lib/utils.