Naar inhoud
1.6k

Introduction

Wat neobrutalisme precies is, en hoe het ontwerpsysteem van Neobrutalism.com dit toepast op React — open-code componenten, blokken en sjablonen voor shadcn CLI.

Wat is neobrutalisme?

Neobrutalisme is een stijl in webdesign die eind jaren 2010 opkwam als reactie op de eentonigheid van het platte, minimalistische ontwerp. Het pakt de ruwheid van de brutalistische architectuur – eerlijke materialen, zichtbare structuur – en vertaalt die naar het scherm met gedurfde kleuren en speelse geometrische vormen.

Je kunt het herkennen aan vijf kenmerken:

  • Dikke randen — elk element heeft een omlijning, meestal in effen zwart.
  • Harde schaduwen — vlakke verschuivingen zonder vervaging, waardoor elementen eruitzien alsof ze fysiek op elkaar zijn gestapeld op de pagina.
  • Opvallende kleuren — contrastrijke, verzadigde vullingen. Geen kleurverlopen, geen glassmorphism.
  • Rechte hoeken en vetgedrukte letters — geometrie die ruimte inneemt in plaats van zich daarvoor te verontschuldigen.
  • Tactiele interactie — knoppen zakken zichtbaar weg in hun schaduw als je erop klikt.

Niets zweeft, niets vervaagt, niets gaat schuil. Dankzij het nieuwe ontwerp van Gumroad uit 2021 is deze stijl mainstream geworden; tegenwoordig is het de eerste keuze voor producten die er bewust uit willen zien in plaats van standaard.

Wat is Neobrutalism.com?

Neobrutalism.com is een ontwerpsysteem dat de stijl van React overneemt — het is gebaseerd op hetzelfde registratiemodel als shadcn/ui. Je hoeft geen pakket te installeren: de shadcn CLI kopieert de broncode van elke component naar je project, en vanaf dat moment is het jouw code.

Wat zit erin:

  • Componenten — de volledige set, in dezelfde stijl ontworpen volgens één ontwerpconcept, zodat randen, schaduwen en lettertypes goed bij elkaar passen.
  • Blokken — kant-en-klare onderdelen: helden, prijstabellen, inlogschermen, dashboards.
  • Sjablonen — complete websites en beheerderspaneel.
  • Thema’s — een themabouwer met voorinstellingen die je kunt delen.
  • Figma kit — hetzelfde systeem voor ontwerpers.
  • MCP server — AI-editors zoals Claude Code en Cursor kunnen componenten op naam toevoegen.

Twee basiselementen, één stijl

Elk onderdeel wordt in twee varianten geleverd. Je kiest per onderdeel tijdens de installatie — de installatie-URL bepaalt welke je krijgt:

  • Radix UI — de basiselementen waarop de meeste shadcn-projecten al draaien.
  • Base UI — de nieuwere primitieven van het team van Radix + MUI.

Dezelfde look, dezelfde exportmogelijkheden, dezelfde API. Toegankelijkheid — focus, toetsenbord, schermlezers — komt voort uit de onderliggende basiselementen.

Probeer het eens

Eén commando, geen configuratie:

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

Ga dan naar ‘Installatie’ voor de lettertypen en thematokens, of bekijk eerst de componenten.