Neobrutalism Components (neobrutalism.dev) é um conjunto gratuito e licenciado por MIT de componentes neobrutalistas para React e Tailwind que são instalados com o CLI do shadcn. Desde 14 de setembro de 2026, funciona com Base UI em vez de Radix UI. A atualização chegou em um único pull request com 50 commits (#117), que também adiciona paletas de cor duotonais e remove o modo escuro.
Em julho de 2025, o autor anunciou que deixaria de trabalhar no projeto. No momento da publicação desta nota (21 de setembro de 2026), o README da main ainda dizia “no longer maintained” (não mais mantido). No entanto, pela atividade recente, tudo indica que o projeto está sendo mantido.
O que é neobrutalismo em design web?
O neobrutalismo é um estilo de interface que mistura o brutalismo web com tipografia, ilustração e animação modernas. Seus traços são fáceis de reconhecer:
- bordas negras grossas
- sombras duras e deslocadas, sem suavização
- cores planas e saturadas
- tipografia marcada
É o oposto das interfaces cinzentas e de baixo contraste que dominam o SaaS: busca chamar atenção propositalmente.
O que é Neobrutalism Components?
É uma coleção de componentes baseados em shadcn/ui e resestilizados com a estética neobrutalista. Foi criada por Samuel Breznjak e tem 5.5k estrelas no GitHub.
Igual ao shadcn, não é uma dependência que você importa: o código-fonte de cada componente é copiado para seu projeto, normalmente em components/ui/. A partir daí é seu e você pode modificá-lo.
A biblioteca cobre o conjunto usual do shadcn: botões, diálogos, menus, formulários, calendário, tabela de dados e gráficos. A atualização de setembro adiciona peças que acompanham as novidades recentes do shadcn:
- Controles: toggle group, native select, button group,
kbd, spinner, input group e field. - Componentes de chat: message, bubble, attachment, message scroller e questionnaire.
Por que muda de Radix UI para Base UI?
Porque shadcn/ui fez a mesma mudança. Em julho de 2026, shadcn converteu Base UI na opção padrão para novos projetos. Base UI vem do mesmo time que criou Radix UI, e shadcn continua dando suporte completo ao Radix.
Uma biblioteca que se monta sobre shadcn tem que acompanhar o que shadcn gera. Caso contrário, seus componentes deixam de coincidir com os que o CLI cria.
Para um projeto novo, isso simplesmente significa que tudo se encaixa com o padrão atual do shadcn. Se já tem um projeto, verifique a seção de migração mais abaixo.
Como é instalado em um projeto shadcn?
Os estilos são publicados como um style do registry do shadcn, então um único comando configura a paleta e os design tokens.
Projeto novo. Este comando cria components.json, escreve em globals.css a paleta e todos os tokens que os componentes precisam, instala as dependências e adiciona o componente Button:
pnpm dlx shadcn@latest init https://neobrutalism.dev/r/styling/blue.json
Projeto shadcn existente. Este comando integra a paleta e os tokens em seu globals.css atual:
pnpm dlx shadcn@latest add https://neobrutalism.dev/r/styling/blue.json
Depois, cada página de componente fornece seu próprio comando do CLI do shadcn. Os componentes que não têm comando são copiados manualmente para sua pasta de componentes.
A documentação avisa que algumas variantes diferem das do shadcn padrão. Por exemplo, o botão tem uma variante noShadow.
Paletas e temas (shadcn themes)
blue é apenas uma das paletas. As demais, incluindo as novas paletas duotonais, estão na página de styling.
Essa página também inclui:
- um seletor de Google Fonts
- uma aba Manual com o CSS, se preferir colá-lo você mesmo em vez de usar o CLI
O que quebra ao migrar de Radix UI para Base UI?
Bastante, mas você não precisa migrar tudo de uma vez. Radix UI e Base UI podem coexistir, e apenas os componentes que você reinstalar a partir do site são alterados. A documentação anterior, baseada em Radix, continua disponível em old.neobrutalism.dev.
Estas são as principais mudanças, segundo o guia oficial de migração.
Instale Base UI
pnpm add @base-ui/react
Configure os portais
Base UI renderiza os popups através de portais. Por isso é preciso adicionar isolate e converter o body em um elemento posicionado:
<body className="relative isolate">{children}</body>
asChild passa a ser render
// Antes
<DialogTrigger asChild>
<Button variant="neutral">Open</Button>
</DialogTrigger>
// Depois
<DialogTrigger render={<Button variant="neutral" />}>Open</DialogTrigger>
Mudam os atributos de estado
Os seletores data-state do Radix passam para os atributos do Base UI. Por exemplo:
data-[state=open]passa a serdata-opendata-[state=checked]passa a serdata-checked
Qualquer CSS próprio que aponte para os seletores antigos precisa ser atualizado.
Sobram pacotes
Quando nenhum componente importar Radix, você pode remover os pacotes do Radix e também estes três:
vaul: o drawer agora usa o do Base UI.sonner: o toast baseado em sonner desaparece.next-themes: o modo escuro já não existe.
Há saltos de versão maior
Os componentes afetados passam para estas versões:
recharts3@tanstack/react-table9react-day-picker9react-resizable-panels4lucide-react1.x, que removeu os ícones de marcas (GitHub, Twitter…)
Se seus componentes estão muito personalizados
shadcn publica uma skill de migração para agentes de código. É instalada com este comando:
pnpm dlx skills add shadcn/ui
```Depois você pede ao seu agente algo como `migrate accordion to base-ui`. O skill migra um componente por vez e deixa um relatório de cada um.
## Ainda é mantido?
O histórico de commits diz que sim. Quase todos os commits do PR #117 levam a marca `Co-Authored-By: Claude Fable 5.1`. Ou seja, o autor fez a reescrita junto a um agente de código de IA, 14 meses depois de ter se afastado publicamente do projeto.
É um exemplo concreto de um padrão que convém acompanhar de perto. Migrar para uma nova biblioteca de primitivas é exatamente o tipo de trabalho tedioso e bem especificado que antes deixava congelado um projeto paralelo para sempre. Aqui foi resolvido em um único pull request.
## Neobrutalism.dev ou neobrutalism.com (RetroUI)?
São projetos distintos, e a similaridade de nomes confunde.
**neobrutalism.dev** é a biblioteca deste artigo:
- gratuita e com licença MIT
- construída sobre Base UI
- apenas modo claro
**neobrutalism.com** é o antigo **RetroUI** com outro nome:
- componentes open source mais blocos e templates Pro pagos
- suporta Radix UI e Base UI
- inclui modo escuro
- tem um servidor MCP para que agentes como Claude Code ou Cursor busquem e instalem componentes por nome
Seus componentes também se instalam com o CLI do shadcn, por exemplo:
```bash
npx shadcn@latest add https://neobrutalism.com/r/base/button.json
Qual escolher?
- neobrutalism.dev, se você quer uma camada de estilo gratuita e autocontida que segue o shadcn atual.
- neobrutalism.com, se você precisa de modo escuro, blocos de página prontos ou instalação a partir do seu agente.
Se você se interessa por design systems que um agente pode ler, cobrimos a mesma ideia pelo lado do Meta em Astryx.
Quando o neobrutalismo não é recomendado?
Este estilo é uma declaração, não um padrão neutro. A thread de Show HN ficou dividida:
- Os críticos o acharam visualmente barulhento.
- Os puristas disseram que tem pouco a ver com o brutalismo arquitetônico.
- Vários desenvolvedores temem que o visual já denuncie um site “vibe-coded”, porque os LLMs costumam produzi-lo quando se pede um design chamativo ou de estilo suíço.
O outro limite prático é o modo escuro. No momento de publicar esta nota, neobrutalism.dev o havia eliminado e o projeto não havia dito se voltará. Se seu produto precisa de um tema escuro, por enquanto isso decide a questão.
Para landing pages, portfólios, projetos pessoais e ferramentas internas que queiram parecer deliberadamente diferentes do SaaS cinzento sobre cinzento, é uma das rotas mais rápidas. A paleta se instala com um comando e, a partir daí, cada componente está a uma cópia de distância.