Neobrutalism Components (neobrutalism.dev) es un conjunto gratuito y con licencia MIT de componentes neobrutalistas para React y Tailwind que se instalan con el CLI de shadcn. Desde el 14 de septiembre de 2026 funciona sobre Base UI en lugar de Radix UI. La actualización llegó en un único pull request de 50 commits (#117), que además agrega paletas de color duotono y elimina el modo oscuro.
En julio de 2025, el autor anunció que dejaba de trabajar en el proyecto. Al momento de publicar esta nota (21 de septiembre de 2026), el README de main todavía decía “no longer maintained”. Sin embargo, por la actividad reciente, todo indica que el proyecto sí se está manteniendo.
¿Qué es el neobrutalismo en diseño web?
El neobrutalismo es un estilo de interfaz que mezcla el brutalismo web con tipografía, ilustración y animación modernas. Sus rasgos son fáciles de reconocer:
- bordes negros gruesos
- sombras duras y desplazadas, sin difuminado
- colores planos y saturados
- tipografía marcada
Es lo opuesto a las interfaces grises y de bajo contraste que dominan el SaaS: busca llamar la atención a propósito.
¿Qué es Neobrutalism Components?
Es una colección de componentes basados en shadcn/ui y reestilizados con la estética neobrutalista. La creó Samuel Breznjak y tiene 5.5k estrellas en GitHub.
Igual que shadcn, no es una dependencia que importas: el código fuente de cada componente se copia a tu proyecto, normalmente en components/ui/. A partir de ahí es tuyo y puedes modificarlo.
La librería cubre el set habitual de shadcn: botones, diálogos, menús, formularios, calendario, data table y gráficos. La actualización de septiembre suma piezas que acompañan las novedades recientes de shadcn:
- Controles: toggle group, native select, button group,
kbd, spinner, input group y field. - Componentes de chat: message, bubble, attachment, message scroller y questionnaire.
¿Por qué cambia de Radix UI a Base UI?
Porque shadcn/ui hizo el mismo cambio. En julio de 2026, shadcn convirtió a Base UI en la opción por defecto para proyectos nuevos. Base UI viene del mismo equipo que creó Radix UI, y shadcn sigue dando soporte completo a Radix.
Una librería que se monta sobre shadcn tiene que seguir lo que shadcn genera. Si no, sus componentes dejan de coincidir con los que crea el CLI.
Para un proyecto nuevo, esto simplemente significa que todo encaja con el default actual de shadcn. Si ya tienes un proyecto, revisa la sección de migración más abajo.
¿Cómo se instala en un proyecto shadcn?
Los estilos se publican como un style del registry de shadcn, así que un solo comando configura la paleta y los design tokens.
Proyecto nuevo. Este comando crea components.json, escribe en globals.css la paleta y todos los tokens que necesitan los componentes, instala las dependencias y agrega el componente Button:
pnpm dlx shadcn@latest init https://neobrutalism.dev/r/styling/blue.json
Proyecto shadcn existente. Este comando integra la paleta y los tokens en tu globals.css actual:
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/styling/blue.json
Después, cada página de componente te da su propio comando del CLI de shadcn. Los componentes que no tienen comando se copian a mano a tu carpeta de componentes.
La documentación advierte que algunas variantes difieren de las de shadcn estándar. Por ejemplo, el botón tiene una variante noShadow.
Paletas y temas (shadcn themes)
blue es solo una de las paletas. Las demás, incluidas las nuevas paletas duotono, están en la página de styling.
Esa página también incluye:
- un selector de Google Fonts
- una pestaña Manual con el CSS, por si prefieres pegarlo tú mismo en lugar de usar el CLI
¿Qué se rompe al migrar de Radix UI a Base UI?
Bastante, pero no tienes que migrar todo de una vez. Radix UI y Base UI pueden convivir, y solo cambian los componentes que vuelvas a instalar desde el sitio. La documentación anterior, basada en Radix, sigue disponible en old.neobrutalism.dev.
Estos son los cambios principales, según la guía oficial de migración.
Instala Base UI
pnpm add @base-ui/react
Configura los portales
Base UI renderiza los popups a través de portales. Por eso hay que agregar isolate y convertir el body en un elemento posicionado:
<body className="relative isolate">{children}</body>
asChild pasa a ser render
// Antes
<DialogTrigger asChild>
<Button variant="neutral">Open</Button>
</DialogTrigger>
// Después
<DialogTrigger render={<Button variant="neutral" />}>Open</DialogTrigger>
Cambian los atributos de estado
Los selectores data-state de Radix pasan a los atributos de Base UI. Por ejemplo:
data-[state=open]pasa a serdata-opendata-[state=checked]pasa a serdata-checked
Cualquier CSS propio que apunte a los selectores antiguos hay que actualizarlo.
Sobran paquetes
Cuando ningún componente importe Radix, puedes quitar los paquetes de Radix y además estos tres:
vaul: el drawer ahora usa el de Base UI.sonner: el toast basado en sonner desaparece.next-themes: el modo oscuro ya no existe.
Hay saltos de versión mayor
Los componentes afectados pasan a estas versiones:
recharts3@tanstack/react-table9react-day-picker9react-resizable-panels4lucide-react1.x, que eliminó los íconos de marcas (GitHub, Twitter…)
Si tus componentes están muy personalizados
shadcn publica un skill de migración para agentes de código. Se instala con este comando:
pnpm dlx skills add shadcn/ui
Después le pides a tu agente algo como migrate accordion to base-ui. El skill migra un componente a la vez y deja un informe de cada uno.
¿Sigue mantenido?
El historial de commits dice que sí. Casi todos los commits del PR #117 llevan la marca Co-Authored-By: Claude Fable 5.1. Es decir, el autor hizo la reescritura junto a un agente de código de IA, 14 meses después de haberse apartado públicamente del proyecto.
Es un ejemplo concreto de un patrón que conviene seguir de cerca. Migrar a una nueva librería de primitivas es justo el tipo de trabajo tedioso y bien especificado que antes dejaba congelado un proyecto paralelo para siempre. Aquí se resolvió en un solo pull request.
¿Neobrutalism.dev o neobrutalism.com (RetroUI)?
Son proyectos distintos, y la similitud de nombres confunde.
neobrutalism.dev es la librería de este artículo:
- gratuita y con licencia MIT
- construida sobre Base UI
- solo modo claro
neobrutalism.com es el antiguo RetroUI con otro nombre:
- componentes open source más bloques y plantillas Pro de pago
- soporta Radix UI y Base UI
- incluye modo oscuro
- tiene un servidor MCP para que agentes como Claude Code o Cursor busquen e instalen componentes por nombre
Sus componentes también se instalan con el CLI de shadcn, por ejemplo:
npx shadcn@latest add https://neobrutalism.com/r/base/button.json
¿Cuál elegir?
- neobrutalism.dev, si quieres una capa de estilo gratuita y autocontenida que sigue al shadcn actual.
- neobrutalism.com, si necesitas modo oscuro, bloques de página listos o instalación desde tu agente.
Si te interesan los design systems que un agente puede leer, cubrimos la misma idea desde el lado de Meta en Astryx.
¿Cuándo no conviene el neobrutalismo?
Este estilo es una declaración, no un default neutro. El hilo de Show HN estuvo dividido:
- Los críticos lo encontraron visualmente ruidoso.
- Los puristas dijeron que tiene poco que ver con el brutalismo arquitectónico.
- Varios desarrolladores temen que el look ya delate un sitio “vibe-coded”, porque los LLM suelen producirlo cuando se les pide un diseño llamativo o de estilo suizo.
El otro límite práctico es el modo oscuro. Al momento de publicar esta nota, neobrutalism.dev lo había eliminado y el proyecto no había dicho si volverá. Si tu producto necesita un tema oscuro, por ahora eso decide la cuestión.
Para landing pages, portafolios, proyectos personales y herramientas internas que quieran verse deliberadamente distintas del SaaS gris sobre gris, es una de las rutas más rápidas. La paleta se instala con un comando y, a partir de ahí, cada componente está a una copia de distancia.