1 de mayo de 2026

react neobrutalismo diseño UI tutorial retroui

Cómo convertir cualquier proyecto React al neobrutalismo en 10 minutos

¿Quieres darle a tu aburrida app de React un cambio de imagen atrevido? Aprende a transformar cualquier proyecto React en un impactante diseño neobrutalista en solo 10 minutos con Neobrutalism. Tutorial paso a paso con ejemplos de antes y después.

Dov Azencot

@DovAzencot

Compartir en X

Seamos sinceros: tu app de React probablemente se parece a todas las demás apps de React que hay por ahí. ¿Limpia? Claro. ¿Profesional? Sin duda. ¿Memorable? Ni de lejos.

¿Pero y si te dijera que en solo 10 minutos podrías transformar tu proyecto de aspecto genérico en algo que grita personalidad? Algo que hace que la gente diga: «Ostras, ¿qué es ESO?»

Ese es el poder del neobrutalismo: un estilo de diseño atrevido, sin complejos e imposible de ignorar. Y con Neobrutalism, convertir tu proyecto React es ridículamente fácil.

Prepárate un café (o una bebida energética, sin juzgar) y convirtamos esa app sosa en algo con más chispa.

¿Qué diablos es el neobrutalismo, en realidad?

Antes de meternos de lleno, pongámonos de acuerdo. El neobrutalismo es un movimiento de diseño que se inspira en la arquitectura brutalista de los años 50, cruda y cargada de hormigón, y le da una vuelta moderna y digital.

Imagina:

Bordes negros gruesos en todo
Sombras duras (nada de esas tonterías del desenfoque suave)
Colores de alto contraste como el negro, el blanco y el amarillo neón
Cero esquinas redondeadas (todo afilado y angular)
Maquetas asimétricas que rompen la cuadrícula

Es antiperfeccionismo. Es rebelde. Es el equivalente en diseño a presentarse con una chaqueta de cuero a una reunión de la junta directiva. Y funciona.

¿Por qué Neobrutalism?

Podrías construir componentes neobrutalistas desde cero, pero ¿para qué reinventar la rueda si existe Neobrutalism? Es una biblioteca de UI para React pensada específicamente para el neobrutalismo, con:

Componentes listos para usar con esa estética brutal tan característica
Instalación fácil desde la CLI
Personalización total con Tailwind CSS
Compatible con Next.js, Vite, Remix; básicamente cualquier configuración de React

Además, es gratis y open source. Empecemos.

Paso 1: prepara tu proyecto (2 minutos)

Lo primero es lo primero. Si partes de un proyecto React existente, ya llevas ventaja. Si no, montemos rápido una app de Next.js (pero esto funciona con cualquier framework de 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

Di que sí a TypeScript y a Tailwind CSS cuando te lo pregunten. Necesitaremos ambos.

Si usas Vite o Create React App, también vale: la configuración es casi idéntica.

Paso 2: instala Neobrutalism (1 minuto)

Ahora, la magia. Tenemos que inicializar shadcn (Neobrutalism se apoya en él por debajo) e instalar las utilidades de Neobrutalism.

Ejecuta este comando:


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

Te aparecerán algunas preguntas. Esto es lo que deberías elegir:

Style: Default
Base color: Slate (da igual, lo vamos a sobrescribir)
CSS variables: Yes

Luego, instala los utils de 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

Listo. Eso es todo. Ya tienes los cimientos para construir interfaces brutalistas.

Paso 3: añade el tema neobrutalista (2 minutos)

Aquí es donde la transformación empieza de verdad. Abre tu archivo global.css (normalmente en app/globals.css o src/index.css) y reemplaza las variables del tema por el sello brutal de Neobrutalism.

Pega esto en tu 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;
}

¿Qué acaba de pasar?

Eliminamos todos los border-radius (¡se acabaron las esquinas redondeadas!)
Cambiamos las sombras suaves por sombras duras y desplazadas
Configuramos un esquema de color negro/blanco/amarillo bien marcado
Añadimos compatibilidad con el modo oscuro (porque no somos unos salvajes)

Tu app ya empieza a verse distinta. Pero aún no hemos terminado.

Paso 4: instala tus primeros componentes (2 minutos)

Vamos a por unos componentes de verdad. Empezaremos por lo esencial: Button, Card e Input.

Ejecuta estos comandos uno por 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

Cada componente se añade a tu carpeta components/neobrutalism/, listo para usar. No hace falta escribir una sola línea de CSS.

Paso 5: reemplaza tus componentes (2 minutos)

Ahora viene la parte divertida: reemplazar tus viejos componentes aburridos por los nuevos, bien brutales.

Antes:

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

Después:

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

Así de fácil, ya tienes un botón con bordes negros gruesos, una sombra dura y ese aire neobrutalista tan característico.

Hagamos lo mismo con una tarjeta:

Antes:

<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>

Después:

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>

Misma estructura, un aire completamente distinto. La tarjeta tiene ahora bordes afilados, bordes gruesos y una sombra dura que la hace saltar de la página.

Paso 6: añade las fuentes neobrutalistas (1 minuto)

La tipografía es ENORME en el neobrutalismo. Las fuentes del sistema por defecto no darán la talla. Neobrutalism recomienda Archivo Black para los títulos y Space Grotesk para el cuerpo de texto.

Si usas Next.js, añade esto a tu 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>
  );
}

Ahora tus títulos son macizos y contundentes, mientras que el cuerpo de texto se mantiene limpio y legible.

Paso 7: afina y personaliza (opcional)

A estas alturas prácticamente has terminado, pero si quieres personalizar más a fondo, Neobrutalism te lo pone fácil.

¿Quieres otro color de acento? Cambia la variable --primary en tu CSS.

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

¿Quieres sombras más suaves? Ajusta las variables de sombra.

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

¿Quieres añadir más componentes? Explora la biblioteca completa en neobrutalism.com/docs/components. Hay inputs, badges, diálogos, tablas y mucho más, todos con esa estética brutal.

Antes y después: la transformación

Muy bien, veamos la diferencia. Así se ve una landing page sencilla antes y después de la conversión neobrutalista.

Antes: una app de React genérica

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>
  );
}

¿Qué falla aquí?

Nada, técnicamente. Es funcional. Es limpia. Pero también es del todo olvidable. Si se la mostraras a 100 personas, la confundirían con una docena de otros sitios que han visto esta semana.

Después: el cambio de imagen 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>
  );
}

¿Qué cambió?

El fondo: pasó de un gris aburrido a un amarillo eléctrico
La tipografía: un título contundente, en mayúsculas, con Archivo Black
Los bordes: todo tiene bordes negros gruesos
Las sombras: duras y desplazadas, en lugar de desenfoques suaves
Las esquinas: cero border-radius, afiladas y angulares
El aire: de «folleto corporativo» a «startup indie con actitud»

Es la misma estructura de componentes, la misma maqueta, pero la sensación es completamente distinta. La gente se acordará de esta.

Veamos un ejemplo más complejo: una tarjeta de estadísticas de dashboard.

Antes: un dashboard soso

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>
  );
}

Después: un dashboard brutal

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>
  );
}

¿Qué cambia?

Bloques de color: cada tarjeta tiene un fondo distinto (amarillo, blanco, negro)
Tipografía contundente: los números son enormes y usan la fuente display
Alto contraste: el texto blanco sobre negro crea una jerarquía visual inmediata
Etiquetas en mayúsculas: hacen que todo se sienta más deliberado y contundente
Flechas en lugar de color: usa los símbolos ▲ y ▼ para mayor claridad

Los mismos datos, una presentación radicalmente distinta. La versión brutal se siente segura y pensada, no solo ensamblada.

Consejos de pro para el diseño neobrutalista

Ahora que dominas lo básico, aquí tienes algunos consejos para clavar de verdad la estética:

1. Abraza la asimetría

No temas romper la cuadrícula. Desplaza elementos, superpón bordes, deja que las cosas respiren de forma desigual. La perfección es aburrida.

2. Usa el color con intención

El neobrutalismo adora las combinaciones de color de alto contraste. El negro y el blanco como base, y luego añade uno o dos colores de acento (amarillo, rosa, cian). No vayas de arcoíris: elige un aire y comprométete.

3. Ve a lo grande con la tipografía

Los títulos deben ser ENORMES. El cuerpo de texto puede ser normal, pero tus H1 deben imponer atención. Usa letras contundentes, en mayúsculas, cuando quieras marcar la diferencia.

4. Añade microinteracciones

Brutal no significa estático. Añade efectos de hover donde los botones se desplacen un poco o las sombras crezcan. Mantenlo sutil pero perceptible.

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

5. No te pases

No todos los elementos necesitan un borde grueso. No todas las secciones necesitan un fondo vivo. El equilibrio sigue siendo importante, solo que inclinado hacia la audacia.

Qué hacer a continuación

¡Felicidades! Acabas de darle a tu proyecto React una renovación visual completa en unos 10 minutos. Esto es lo que puedes hacer a partir de aquí:

Explora más componentes

Neobrutalism tiene una biblioteca completa de componentes: badges, diálogos, tablas, pestañas y más. Echa un vistazo a la documentación de componentes y descubre qué más puedes añadir.

Personaliza tu tema

Juega con las variables CSS para que encajen con tu marca. Cambia los colores de acento, ajusta la intensidad de las sombras o afina el espaciado para hacerlo tuyo.

Construye algo chulo

Ahora que tu app no se ve genérica, ¡presúmela! Compártela en Twitter, publícala en Reddit, añádela a tu portafolio. El neobrutalismo llama la atención.

Únete a la comunidad

Neobrutalism tiene un Discord muy activo donde diseñadores y desarrolladores comparten proyectos, hacen preguntas y se emocionan con el diseño brutal. Pásate y saluda.

Reflexiones finales

La mayoría de las apps de React se parecen porque la mayoría de los desarrolladores recurren a las mismas herramientas: Material UI, Bootstrap, shadcn con la configuración por defecto. No hay nada malo en ellas (¡son geniales!), pero no te ayudarán a destacar.

El neobrutalismo es un atajo hacia la personalidad. Es atrevido, memorable y sorprendentemente fácil de implementar con las herramientas adecuadas. Neobrutalism te da todo lo que necesitas para dar el salto sin reconstruir desde cero.

En solo 10 minutos, pasaste de «otra app de React» a «espera, ¿qué es ESO?». Y sinceramente, eso es poderoso.

Así que adelante: haz que tu app sea imposible de ignorar.

Ahora, lánzate y construye algo brutal. 🚀

← Volver a los artículos

Cómo convertir cualquier proyecto React al neobrutalismo en 10 minutos

¿Qué diablos es el neobrutalismo, en realidad?

¿Por qué Neobrutalism?

Paso 1: prepara tu proyecto (2 minutos)

Paso 2: instala Neobrutalism (1 minuto)

Paso 3: añade el tema neobrutalista (2 minutos)

Paso 4: instala tus primeros componentes (2 minutos)

Paso 5: reemplaza tus componentes (2 minutos)

Paso 6: añade las fuentes neobrutalistas (1 minuto)

Paso 7: afina y personaliza (opcional)

Antes y después: la transformación

Antes: una app de React genérica

Después: el cambio de imagen neobrutalista

Otro ejemplo: un widget de dashboard

Antes: un dashboard soso

Después: un dashboard brutal

Consejos de pro para el diseño neobrutalista

Qué hacer a continuación

Reflexiones finales

Cómo crear un sitio neobrutalista con Tailwind CSS v4 (paso a paso)

Las 8 mejores bibliotecas de animación React en 2026

20 paletas de colores neobrutalistas con códigos hex (listas para copiar y pegar)

Cómo convertir cualquier proyecto React al neobrutalismo en 10 minutos

¿Qué diablos es el neobrutalismo, en realidad?

¿Por qué Neobrutalism?

Paso 1: prepara tu proyecto (2 minutos)

Paso 2: instala Neobrutalism (1 minuto)

Paso 3: añade el tema neobrutalista (2 minutos)

Paso 4: instala tus primeros componentes (2 minutos)

Paso 5: reemplaza tus componentes (2 minutos)

Paso 6: añade las fuentes neobrutalistas (1 minuto)

Paso 7: afina y personaliza (opcional)

Antes y después: la transformación

Antes: una app de React genérica

Después: el cambio de imagen neobrutalista

Otro ejemplo: un widget de dashboard

Antes: un dashboard soso

Después: un dashboard brutal

Consejos de pro para el diseño neobrutalista

Qué hacer a continuación

Reflexiones finales

Sigue leyendo

Cómo crear un sitio neobrutalista con Tailwind CSS v4 (paso a paso)

Las 8 mejores bibliotecas de animación React en 2026

20 paletas de colores neobrutalistas con códigos hex (listas para copiar y pegar)