Vai al contenuto
1.6k

Introduction

Cos’è il neobrutalismo e come il sistema di design Neobrutalism.com lo porta su React — componenti open-code, blocchi e modelli per il shadcn CLI.

Cos’è il neobrutalismo?

Il neobrutalismo è uno stile di web design nato alla fine degli anni 2010 come reazione alla monotonia del design piatto e minimalista. Prende la crudezza dell’architettura brutalista — materiali grezzi, struttura a vista — e la traduce sullo schermo con colori audaci e geometrie giocose.

Lo puoi riconoscere da cinque caratteristiche:

  • Bordi spessi — ogni elemento è contornato, di solito in nero pieno.
  • Ombre nette — sfondi piatti senza sfocatura, così gli elementi sembrano davvero sovrapposti sulla pagina.
  • Colori vivaci — riempimenti saturi e ad alto contrasto. Niente sfumature, niente "glassmorphism".
  • Angoli squadrati e caratteri marcati: una geometria che occupa spazio senza scusarsi.
  • Interazione tattile — quando clicchi sui pulsanti, questi si incassano visibilmente nelle loro ombre.

Niente galleggia, niente si sfuma, niente si nasconde. Il restyling del 2021 di “Gumroad” ha reso questo stile di grande diffusione; oggi è la scelta preferita per i prodotti che vogliono apparire curati anziché generici.

Cos’è “Neobrutalism.com”?

Neobrutalism.com È un sistema di design che porta lo stile di React — basato sullo stesso modello di registro di shadcn/ui. Non devi installare nessun pacchetto: il comando shadcn CLI copia il codice sorgente di ogni componente nel tuo progetto, e da quel momento in poi è tutto il tuo codice.

Cosa c'è dentro:

  • Componenti — il set completo, progettato secondo un unico stile, in modo che bordi, ombre e caratteri tipografici siano coordinati tra loro.
  • Blocchi — sezioni già pronte: eroi, tabelle dei prezzi, schermate di autenticazione, dashboard.
  • Modelli — siti completi e pannelli di amministrazione.
  • Temi — un generatore di temi con impostazioni predefinite condivisibili.
  • Figma kit — lo stesso sistema per i designer.
  • MCP server — Gli editor basati sull'intelligenza artificiale come Claude Code e Cursor possono aggiungere componenti in base al nome.

Due forme semplici, un unico stile

Ogni componente è disponibile in due varianti. Scegli quella che preferisci al momento dell'installazione: sarà l'URL di installazione a determinare quale delle due verrà scaricata:

  • Radix UI — le primitive su cui girano già la maggior parte dei progetti dishadcn.
  • Base UI — le nuove primitive del team Radix + MUI.

Stesso aspetto, stesse esportazioni, stessa API. L'accessibilità — focus, tastiera, lettori di schermo — deriva dalle primitive sottostanti.

Provalo

Un solo comando, nessuna configurazione:

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

A questo punto vai alla sezione "Installazione" per i font e i token dei temi, oppure dai prima un'occhiata ai componenti.