Pular para o conteúdo
1.6k

Introduction

O que é o neobrutalismo e como o sistema de design Neobrutalism.com o traz para React — componentes de código aberto, blocos e modelos para o shadcn CLI.

O que é o neobrutalismo?

O neobrutalismo é um estilo de web design que surgiu no final da década de 2010 como uma reação à monotonia do design plano e minimalista. Ele pega a crueza da arquitetura brutalista — materiais autênticos, estrutura visível — e a traduz para a tela com cores ousadas e geometria divertida.

Você pode reconhecê-lo por cinco características:

  • Bordas grossas — cada elemento tem um contorno, geralmente em preto sólido.
  • Sombras marcantes — deslocamentos planos sem desfoque, de modo que os elementos pareçam estar fisicamente empilhados na página.
  • Cores fortes — preenchimentos saturados e de alto contraste. Nada de gradientes nem de “glassmorphism”.
  • Cantos retos e letras em negrito — uma geometria que ocupa espaço em vez de se desculpar por isso.
  • Interação tátil — os botões afundam visivelmente em suas sombras quando clicados.

Nada fica suspenso, nada fica desfocado, nada fica oculto. O redesenho de 2021 do “Gumroad” tornou esse estilo popular; hoje, é a escolha certa para produtos que querem parecer bem pensados, em vez de parecerem algo padrão.

O que é o “Neobrutalism.com”?

Neobrutalism.com é um sistema de design que traz o estilo do React — construído com o mesmo modelo de registro do shadcn/ui. Você não precisa instalar nenhum pacote: o shadcn CLI copia o código-fonte de cada componente para o seu projeto e, a partir daí, o código passa a ser seu.

O que tem aqui dentro:

  • Componentes — o conjunto completo, com um estilo padronizado para que as bordas, sombras e tipografia fiquem harmonizadas entre si.
  • Blocos — seções prontas: heróis, tabelas de preços, telas de autenticação, painéis.
  • Modelos — sites completos e painéis de administração.
  • Temas — um criador de temas com predefinições que você pode compartilhar.
  • Figma kit — o mesmo sistema para designers.
  • MCP servidor — Editores de IA como Claude Code e Cursor podem adicionar componentes pelo nome.

Duas formas básicas, um estilo

Cada componente vem em duas versões. Escolha uma por componente na hora da instalação — a URL de instalação determina qual delas você vai receber:

  • Radix UI — os recursos básicos nos quais a maioria dos projetos do shadcn já funciona.
  • Base UI — as novas primitivas da equipe do Radix + MUI.

Mesma aparência, mesmas exportações, mesma API. A acessibilidade — foco, teclado, leitores de tela — vem dos elementos básicos por trás.

Experimenta aí

Um comando, sem configuração:

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

Depois, vai até a seção “Instalação” para ver as fontes e os tokens de tema, ou dá uma olhada nos componentes primeiro.