1 maggio 2026

react neobrutalismo design UI tutorial retroui

Come convertire qualsiasi progetto React al neobrutalismo in 10 minuti

Vuoi dare alla tua noiosa app React un restyling audace? Impara a trasformare qualsiasi progetto React in un sorprendente design neobrutalista in soli 10 minuti con Neobrutalism. Tutorial passo dopo passo con esempi prima/dopo.

Dov Azencot

@DovAzencot

Condividi su X

Diciamocelo: la tua app React probabilmente assomiglia a tutte le altre app React in circolazione. Pulita? Certo. Professionale? Senza dubbio. Memorabile? Neanche lontanamente.

Ma se ti dicessi che in soli 10 minuti potresti trasformare il tuo progetto dall'aspetto generico in qualcosa che grida personalità? Qualcosa che fa dire alla gente: «Wow, ma quello COS'È?»

È questo il potere del neobrutalismo: uno stile di design audace, senza compromessi e impossibile da ignorare. E con Neobrutalism convertire il tuo progetto React è ridicolmente facile.

Prenditi un caffè (o un energy drink, senza giudizio) e trasformiamo quell'app anonima in qualcosa con un po' di pepe.

Ma che diavolo è il neobrutalismo, in realtà?

Prima di buttarci, mettiamoci d'accordo. Il neobrutalismo è un movimento di design che si ispira all'architettura brutalista degli anni '50, grezza e piena di cemento, e le dà una svolta moderna e digitale.

Immagina:

Bordi neri spessi su tutto
Ombre dure (niente di quelle sciocchezze della sfocatura morbida)
Colori ad alto contrasto come il nero, il bianco e il giallo neon
Zero angoli arrotondati (tutto affilato e angolare)
Layout asimmetrici che rompono la griglia

È antiperfezionismo. È ribelle. È l'equivalente in design di presentarsi con una giacca di pelle a una riunione del consiglio d'amministrazione. E funziona.

Perché Neobrutalism?

Potresti costruire componenti neobrutalisti da zero, ma perché reinventare la ruota se esiste Neobrutalism? È una libreria UI per React pensata appositamente per il neobrutalismo, con:

Componenti pronti all'uso con quell'estetica brutale così caratteristica
Installazione facile dalla CLI
Personalizzazione totale con Tailwind CSS
Compatibile con Next.js, Vite, Remix: praticamente qualsiasi configurazione React

Inoltre è gratuita e open source. Cominciamo.

Passo 1: prepara il tuo progetto (2 minuti)

Le cose importanti prima di tutto. Se parti da un progetto React esistente, sei già avvantaggiato. Se no, tiriamo su al volo un'app Next.js (ma questo funziona con qualsiasi framework React).


pnpm create next-app@latest my-brutal-app
cd my-brutal-app
npx create-next-app@latest my-brutal-app
cd my-brutal-app
yarn create next-app@latest my-brutal-app
cd my-brutal-app
bunx --bun create-next-app@latest my-brutal-app
cd my-brutal-app

Rispondi sì a TypeScript e Tailwind CSS quando te lo chiedono. Ci serviranno entrambi.

Se usi Vite o Create React App, va benissimo lo stesso: la configurazione è quasi identica.

Passo 2: installa Neobrutalism (1 minuto)

Ora, la magia. Dobbiamo inizializzare shadcn (Neobrutalism si appoggia a lui sotto il cofano) e installare le utility di Neobrutalism.

Esegui questo comando:


pnpm dlx shadcn@latest init
npx shadcn@latest init
yarn dlx shadcn@latest init
bunx --bun shadcn@latest init

Compariranno alcune domande. Ecco cosa dovresti scegliere:

Style: Default
Base color: Slate (poco importa, tanto lo sovrascriveremo)
CSS variables: Yes

Poi installa le utility di Neobrutalism:


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

Fatto. Tutto qui. Ora hai le fondamenta per costruire interfacce brutaliste.

Passo 3: aggiungi il tema neobrutalista (2 minuti)

È qui che la trasformazione comincia sul serio. Apri il tuo file global.css (di solito in app/globals.css o src/index.css) e sostituisci le variabili del tema con il tema brutale firmato Neobrutalism.

Incolla questo nel tuo CSS:

@theme {
  --font-head: var(--font-head);
  --font-sans: var(--font-sans);
  --radius: 0;
 
  --shadow-xs: 1px 1px 0 0 var(--border);
  --shadow-sm: 2px 2px 0 0 var(--border);
  --shadow: 3px 3px 0 0 var(--border);
  --shadow-md: 4px 4px 0 0 var(--border);
  --shadow-lg: 6px 6px 0 0 var(--border);
  --shadow-xl: 10px 10px 0 1px var(--border);
  --shadow-2xl: 16px 16px 0 1px var(--border);
 
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-border: var(--border);
}
 
:root {
  --radius: 0;
  --background: #fff;
  --foreground: #000;
  --primary: #ffdb33;
  --primary-foreground: #000;
  --secondary: #000;
  --secondary-foreground: #fff;
  --border: #000;
}
 
.dark {
  --background: #1a1a1a;
  --foreground: #f5f5f5;
  --primary: #ffdb33;
  --primary-foreground: #000;
  --secondary: #3a3a3a;
  --secondary-foreground: #f5f5f5;
  --border: #3a3a3a;
}

Cosa è appena successo?

Abbiamo eliminato tutti i border-radius (basta angoli arrotondati)
Abbiamo sostituito le ombre morbide con ombre dure e con offset
Abbiamo impostato uno schema di colore nero/bianco/giallo ben marcato
Abbiamo aggiunto il supporto alla modalità scura (perché non siamo dei selvaggi)

La tua app comincia già ad apparire diversa. Ma non abbiamo ancora finito.

Passo 4: installa i tuoi primi componenti (2 minuti)

Prendiamo qualche componente vero. Partiamo dall'essenziale: Button, Card e Input.

Esegui questi comandi uno per uno:


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

Ogni componente viene aggiunto alla tua cartella components/neobrutalism/, pronto all'uso. Non serve scrivere una sola riga di CSS.

Passo 5: sostituisci i tuoi componenti (2 minuti)

Ora arriva la parte divertente: sostituire i tuoi vecchi componenti noiosi con quelli nuovi, ben brutali.

Prima:

// Your old, generic button
<button className="bg-blue-500 text-white px-4 py-2 rounded">
  Click Me
</button>

Dopo:

import { Button } from "@/components/neobrutalism/Button";
 
<Button>Click Me</Button>

Così, in un attimo, hai un pulsante con bordi neri spessi, un'ombra dura e quell'aria neobrutalista così caratteristica.

Facciamo lo stesso con una scheda:

Prima:

<div className="bg-white shadow-lg rounded-lg p-6">
  <h2 className="text-2xl font-bold">My Card</h2>
  <p className="text-gray-600">Some generic content here.</p>
</div>

Dopo:

import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/neobrutalism/Card";
 
<Card>
  <CardHeader>
    <CardTitle>My Card</CardTitle>
    <CardDescription>Now with 100% more attitude.</CardDescription>
  </CardHeader>
  <CardContent>
    Some bold content here.
  </CardContent>
</Card>

Stessa struttura, un'aria completamente diversa. La scheda ora ha bordi affilati, bordi spessi e un'ombra dura che la fa saltare fuori dalla pagina.

Passo 6: aggiungi i font neobrutalisti (1 minuto)

La tipografia è ENORME nel neobrutalismo. I font di sistema predefiniti non bastano. Neobrutalism consiglia Archivo Black per i titoli e Space Grotesk per il corpo del testo.

Se usi Next.js, aggiungi questo al tuo app/layout.tsx:

import { Archivo_Black, Space_Grotesk } from "next/font/google";
 
const archivoBlack = Archivo_Black({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-head",
  display: "swap",
});
 
const spaceGrotesk = Space_Grotesk({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-sans",
  display: "swap",
});
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={`${archivoBlack.variable} ${spaceGrotesk.variable}`}>
        {children}
      </body>
    </html>
  );
}

Ora i tuoi titoli sono corposi e decisi, mentre il corpo del testo resta pulito e leggibile.

Passo 7: rifinisci e personalizza (facoltativo)

A questo punto hai praticamente finito, ma se vuoi personalizzare più a fondo, Neobrutalism te lo rende facile.

Vuoi un colore d'accento diverso? Cambia la variabile --primary nel tuo CSS.

:root {
  --primary: #ff006e; /* Hot pink instead of yellow */
}

Vuoi ombre più morbide? Regola le variabili delle ombre.

--shadow: 2px 2px 0 0 var(--border); /* Smaller offset */

Vuoi aggiungere altri componenti? Esplora la libreria completa su neobrutalism.com/docs/components. Ci sono input, badge, dialog, tabelle e molto altro, tutti con quell'estetica brutale.

Prima e dopo: la trasformazione

Bene, vediamo la differenza. Ecco come appare una semplice landing page prima e dopo la conversione neobrutalista.

Prima: un'app React generica

export default function GenericLanding() {
  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
      <div className="max-w-md bg-white shadow-lg rounded-lg p-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-4">
          Welcome to My App
        </h1>
        <p className="text-gray-600 mb-6">
          This is a clean, minimal design that looks like every other React app.
        </p>
        <input
          type="email"
          placeholder="Enter your email"
          className="w-full px-4 py-2 border border-gray-300 rounded mb-4"
        />
        <button className="w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
          Get Started
        </button>
      </div>
    </div>
  );
}

Cosa c'è che non va qui?

Niente, tecnicamente. È funzionale. È pulita. Ma è anche del tutto dimenticabile. Se la mostrassi a 100 persone, la confonderebbero con una dozzina di altri siti visti questa settimana.

Dopo: il restyling neobrutalista

import { Button } from "@/components/neobrutalism/Button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/neobrutalism/Card";
import { Input } from "@/components/neobrutalism/Input";
 
export default function BrutalLanding() {
  return (
    <div className="min-h-screen bg-[#ffdb33] flex items-center justify-center p-4">
      <Card className="max-w-md w-full">
        <CardHeader>
          <CardTitle className="text-4xl font-head uppercase">
            Welcome to My App
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-lg font-sans">
            This is a bold, memorable design that actually stands out.
          </p>
          <Input type="email" placeholder="Enter your email" />
          <Button className="w-full">Get Started</Button>
        </CardContent>
      </Card>
    </div>
  );
}

Cosa è cambiato?

Lo sfondo: è passato da un grigio noioso a un giallo elettrico
La tipografia: un titolo deciso, in maiuscolo, con Archivo Black
I bordi: tutto ha bordi neri spessi
Le ombre: dure e con offset, al posto delle sfocature morbide
Gli angoli: zero border-radius, affilati e angolari
L'aria: da «brochure aziendale» a «startup indie con carattere»

È la stessa struttura di componenti, lo stesso layout, ma la sensazione è completamente diversa. La gente si ricorderà di questa.

Vediamo un esempio più complesso: una scheda di statistiche per dashboard.

Prima: una dashboard insipida

export default function GenericStats() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <div className="bg-white rounded-lg shadow p-6">
        <p className="text-gray-500 text-sm">Total Users</p>
        <p className="text-3xl font-bold text-gray-900">1,284</p>
        <p className="text-green-500 text-sm">+12% from last month</p>
      </div>
      <div className="bg-white rounded-lg shadow p-6">
        <p className="text-gray-500 text-sm">Revenue</p>
        <p className="text-3xl font-bold text-gray-900">$52,340</p>
        <p className="text-green-500 text-sm">+8% from last month</p>
      </div>
      <div className="bg-white rounded-lg shadow p-6">
        <p className="text-gray-500 text-sm">Active Now</p>
        <p className="text-3xl font-bold text-gray-900">127</p>
        <p className="text-red-500 text-sm">-3% from last hour</p>
      </div>
    </div>
  );
}

Dopo: una dashboard brutale

import { Card, CardContent } from "@/components/neobrutalism/Card";
 
export default function BrutalStats() {
  return (
    <div className="grid grid-cols-3 gap-6">
      <Card className="bg-[#ffdb33]">
        <CardContent className="pt-6">
          <p className="text-sm font-bold uppercase mb-2">Total Users</p>
          <p className="text-5xl font-head mb-2">1,284</p>
          <p className="text-sm font-bold">▲ 12% from last month</p>
        </CardContent>
      </Card>
      <Card className="bg-white">
        <CardContent className="pt-6">
          <p className="text-sm font-bold uppercase mb-2">Revenue</p>
          <p className="text-5xl font-head mb-2">$52,340</p>
          <p className="text-sm font-bold">▲ 8% from last month</p>
        </CardContent>
      </Card>
      <Card className="bg-black text-white">
        <CardContent className="pt-6">
          <p className="text-sm font-bold uppercase mb-2">Active Now</p>
          <p className="text-5xl font-head mb-2">127</p>
          <p className="text-sm font-bold">▼ 3% from last hour</p>
        </CardContent>
      </Card>
    </div>
  );
}

Cosa cambia?

Blocchi di colore: ogni scheda ha uno sfondo diverso (giallo, bianco, nero)
Tipografia decisa: i numeri sono enormi e usano il font display
Alto contrasto: il testo bianco su nero crea una gerarchia visiva immediata
Etichette in maiuscolo: fanno sembrare tutto più voluto e deciso
Frecce al posto del colore: usa i simboli ▲ e ▼ per maggiore chiarezza

Gli stessi dati, una presentazione radicalmente diversa. La versione brutale sembra sicura e pensata, non solo assemblata.

Consigli da pro per il design neobrutalista

Ora che padroneggi le basi, ecco qualche consiglio per centrare davvero l'estetica:

1. Abbraccia l'asimmetria

Non aver paura di rompere la griglia. Sposta gli elementi, sovrapponi i bordi, lascia che le cose respirino in modo irregolare. La perfezione è noiosa.

2. Usa il colore con intenzione

Il neobrutalismo adora le combinazioni di colore ad alto contrasto. Nero e bianco come base, poi aggiungi uno o due colori d'accento (giallo, rosa, ciano). Non andare in modalità arcobaleno: scegli un'aria e impegnati.

3. Vai in grande con la tipografia

I titoli devono essere ENORMI. Il corpo del testo può essere normale, ma i tuoi H1 devono catturare l'attenzione. Usa lettere decise, in maiuscolo, quando vuoi fare la differenza.

4. Aggiungi microinterazioni

Brutale non significa statico. Aggiungi effetti di hover in cui i pulsanti si spostano un po' o le ombre si ingrandiscono. Mantienili sottili ma percepibili.

<Button className="hover:translate-x-1 hover:translate-y-1 transition-transform">
  Click Me
</Button>

5. Non esagerare

Non tutti gli elementi hanno bisogno di un bordo spesso. Non tutte le sezioni hanno bisogno di uno sfondo acceso. L'equilibrio conta ancora, solo inclinato verso l'audacia.

Cosa fare dopo

Congratulazioni. Hai appena dato al tuo progetto React un rinnovamento visivo completo in circa 10 minuti. Ecco cosa puoi fare da qui:

Esplora altri componenti

Neobrutalism ha una libreria completa di componenti: badge, dialog, tabelle, tab e altro. Dai un'occhiata alla documentazione dei componenti e scopri cos'altro puoi aggiungere.

Personalizza il tuo tema

Gioca con le variabili CSS perché si adattino al tuo brand. Cambia i colori d'accento, regola l'intensità delle ombre o aggiusta la spaziatura per renderlo tuo.

Costruisci qualcosa di figo

Ora che la tua app non ha un aspetto generico, mettila in mostra. Condividila su Twitter, pubblicala su Reddit, aggiungila al tuo portfolio. Il neobrutalismo attira l'attenzione.

Unisciti alla community

Neobrutalism ha un Discord molto attivo dove designer e sviluppatori condividono progetti, fanno domande e si esaltano per il design brutale. Fai un salto e saluta.

Riflessioni finali

La maggior parte delle app React si somiglia perché la maggior parte degli sviluppatori ricorre agli stessi strumenti: Material UI, Bootstrap, shadcn con le impostazioni predefinite. Non c'è niente di male in questi (sono ottimi), ma non ti aiuteranno a distinguerti.

Il neobrutalismo è una scorciatoia verso la personalità. È audace, memorabile e sorprendentemente facile da implementare con gli strumenti giusti. Neobrutalism ti dà tutto ciò che serve per fare il salto senza ricostruire da zero.

In soli 10 minuti sei passato da «un'altra app React» a «aspetta, ma quello COS'È?». E onestamente? È una cosa potente.

Quindi vai avanti: rendi la tua app impossibile da ignorare.

Ora buttati e costruisci qualcosa di brutale. 🚀

← Torna agli articoli

Come convertire qualsiasi progetto React al neobrutalismo in 10 minuti

Ma che diavolo è il neobrutalismo, in realtà?

Perché Neobrutalism?

Passo 1: prepara il tuo progetto (2 minuti)

Passo 2: installa Neobrutalism (1 minuto)

Passo 3: aggiungi il tema neobrutalista (2 minuti)

Passo 4: installa i tuoi primi componenti (2 minuti)

Passo 5: sostituisci i tuoi componenti (2 minuti)

Passo 6: aggiungi i font neobrutalisti (1 minuto)

Passo 7: rifinisci e personalizza (facoltativo)

Prima e dopo: la trasformazione

Prima: un'app React generica

Dopo: il restyling neobrutalista

Un altro esempio: un widget di dashboard

Prima: una dashboard insipida

Dopo: una dashboard brutale

Consigli da pro per il design neobrutalista

Cosa fare dopo

Riflessioni finali

Come creare un sito neobrutalista con Tailwind CSS v4 (passo dopo passo)

Le 8 migliori librerie di animazioni React nel 2026

20 palette di colori neobrutaliste con codici hex (pronte da copiare e incollare)

Come convertire qualsiasi progetto React al neobrutalismo in 10 minuti

Ma che diavolo è il neobrutalismo, in realtà?

Perché Neobrutalism?

Passo 1: prepara il tuo progetto (2 minuti)

Passo 2: installa Neobrutalism (1 minuto)

Passo 3: aggiungi il tema neobrutalista (2 minuti)

Passo 4: installa i tuoi primi componenti (2 minuti)

Passo 5: sostituisci i tuoi componenti (2 minuti)

Passo 6: aggiungi i font neobrutalisti (1 minuto)

Passo 7: rifinisci e personalizza (facoltativo)

Prima e dopo: la trasformazione

Prima: un'app React generica

Dopo: il restyling neobrutalista

Un altro esempio: un widget di dashboard

Prima: una dashboard insipida

Dopo: una dashboard brutale

Consigli da pro per il design neobrutalista

Cosa fare dopo

Riflessioni finali

Continua a leggere

Come creare un sito neobrutalista con Tailwind CSS v4 (passo dopo passo)

Le 8 migliori librerie di animazioni React nel 2026

20 palette di colori neobrutaliste con codici hex (pronte da copiare e incollare)