Introduction

¿Qué es el neobrutalismo?#

El neobrutalismo es un estilo de diseño web que surgió a finales de la década de 2010 como reacción a la monotonía del diseño plano y minimalista. Toma la crudeza de la arquitectura brutalista —materiales sin tratar, estructura visible— y la traslada a la pantalla con colores llamativos y formas geométricas divertidas.

Lo puedes reconocer por cinco características:

• Bordes gruesos: todos los elementos tienen contorno, normalmente en negro liso.
• Sombras marcadas: desplazamientos planos sin desenfoque, para que los elementos parezcan apilados físicamente en la página.
• Colores llamativos: rellenos saturados y de alto contraste. Nada de degradados ni de «glassmorphism».
• Esquinas rectas y tipografía llamativa: una geometría que ocupa espacio en lugar de pedir perdón por ello.
• Interacción táctil: los botones se hunden visiblemente en sus sombras al pulsarlos.

Nada queda suspendido, nada se difumina, nada se oculta. El rediseño de Gumroad en 2021 popularizó este estilo; hoy en día es la opción preferida para los productos que quieren dar una imagen cuidada en lugar de parecer predeterminados.

¿Qué es Neobrutalism.com?#

Neobrutalism.com Es un sistema de diseño que aporta el estilo a React — basado en el mismo modelo de registro que shadcn/ui. No tienes que instalar ningún paquete: al ejecutar «shadcn» CLI, se copia el código fuente de cada componente en tu proyecto y, a partir de ahí, ya es tu código.

Qué hay dentro:

• Componentes: el conjunto completo, diseñado siguiendo un mismo estilo para que los bordes, las sombras y la tipografía combinen entre sí.
• Bloques: secciones ya preparadas: héroes, tablas de precios, pantallas de inicio de sesión, paneles de control.
• Plantillas: sitios web completos y paneles de administración.
• Temas: un creador de temas con plantillas que puedes compartir.
• Figma kit — el mismo sistema para diseñadores. te cuento — el mismo sistema para diseñadores.
• MCP servidor — Los editores de IA como Claude Code y Cursor pueden añadir componentes por su nombre.

Dos formas básicas, un estilo#

Cada componente se ofrece en dos versiones. Elige la que prefieras para cada componente en el momento de la instalación; la URL de instalación determina cuál se te asigna:

• Radix UI — las funciones básicas con las que ya funcionan la mayoría de los proyectos de shadcn.
• Base UI — las nuevas primitivas del equipo de Radix + MUI.

El mismo aspecto, las mismas exportaciones, la misma API. La accesibilidad —foco, teclado, lectores de pantalla— viene dada por los elementos básicos subyacentes.

Pruébalo#

Un comando, sin configuración:

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

A continuación, ve a «Instalación» para ver las fuentes y los tokens de los temas, o echa un vistazo primero a los componentes.