Skip to content
1.6k

Introduction

What neobrutalism is, and how the Neobrutalism.com design system brings it to React — open-code components, blocks and templates for the shadcn CLI.

What is neobrutalism?

Neobrutalism is a web design style that emerged in the late 2010s as a reaction to the sameness of flat, minimal design. It takes the rawness of brutalist architecture — honest materials, visible structure — and translates it to the screen with bold color and playful geometry.

You can recognize it by five traits:

  • Thick borders — every element is outlined, usually in solid black.
  • Hard shadows — flat offsets with no blur, so elements look physically stacked on the page.
  • Loud color — high-contrast, saturated fills. No gradients, no glassmorphism.
  • Square corners and heavy type — geometry that takes up space instead of apologizing for it.
  • Tactile interaction — buttons visibly press into their shadows when clicked.

Nothing floats, nothing blurs, nothing hides. Gumroad's 2021 redesign made the style mainstream; today it's a go-to choice for products that want to look deliberate instead of default.

What is Neobrutalism.com?

Neobrutalism.com is a design system that brings the style to React — built on the same registry model as shadcn/ui. You don't install a package: the shadcn CLI copies each component's source into your project, and from that point it's your code.

What's inside:

  • Components — the full set, styled to one recipe so borders, shadows, and type agree with each other.
  • Blocks — ready-made sections: heroes, pricing tables, auth screens, dashboards.
  • Templates — complete sites and admin panels.
  • Themes — a theme builder with shareable presets.
  • Figma kit — the same system for designers.
  • MCP server — AI editors like Claude Code and Cursor can add components by name.

Three primitives, one style

Every component ships in three backend variants. Pick per component at install time — the install URL decides which one you get:

  • Radix UI — the primitives most shadcn projects already run on.
  • Base UI — the newer primitives from the Radix + MUI team.
  • React Aria — Adobe’s accessibility-first hooks and components.

Same look, same exports, same neobrutalist recipe. Accessibility — focus, keyboard, screen readers — comes from the primitives underneath.

Try it

One command, no config:

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
npx shadcn@latest add https://neobrutalism.com/r/base/button.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/button.json

Then head to Installation for the fonts and theme tokens, or browse the components first.