1 de maio de 2026

react neobrutalismo design de UI tutorial retroui

Como converter qualquer projeto React para o neobrutalismo em 10 minutos

Quer dar à sua app React entediante uma repaginada ousada? Aprenda a transformar qualquer projeto React em um design neobrutalista impactante em apenas 10 minutos com o Neobrutalism. Tutorial passo a passo com exemplos de antes e depois.

Dov Azencot

@DovAzencot

Compartilhar no X

Vamos ser sinceros: a sua app React provavelmente se parece com todas as outras apps React por aí. Limpa? Claro. Profissional? Sem dúvida. Memorável? Nem de longe.

Mas e se eu dissesse que, em apenas 10 minutos, você poderia transformar o seu projeto de aparência genérica em algo que grita personalidade? Algo que faz as pessoas dizerem: "Nossa, o que é ISSO?"

Esse é o poder do neobrutalismo: um estilo de design ousado, sem complexos e impossível de ignorar. E com o Neobrutalism, converter o seu projeto React é ridiculamente fácil.

Pegue o seu café (ou uma bebida energética, sem julgamentos) e vamos transformar essa app sem graça em algo com mais pique.

O que diabos é o neobrutalismo, afinal?

Antes de mergulhar, vamos nos alinhar. O neobrutalismo é um movimento de design que se inspira na arquitetura brutalista dos anos 50, crua e carregada de concreto, e dá a ela uma volta moderna e digital.

Imagine:

Bordas pretas grossas em tudo
Sombras duras (nada dessas bobagens de desfoque suave)
Cores de alto contraste como o preto, o branco e o amarelo neon
Zero cantos arredondados (tudo afiado e angular)
Maquetes assimétricas que quebram a grade

É antiperfeccionismo. É rebelde. É o equivalente em design a se apresentar com uma jaqueta de couro numa reunião de diretoria. E funciona.

Por que o Neobrutalism?

Você poderia construir componentes neobrutalistas do zero, mas para que reinventar a roda se o Neobrutalism existe? É uma biblioteca de UI para React pensada especificamente para o neobrutalismo, com:

Componentes prontos para usar com aquela estética brutal tão característica
Instalação fácil pela CLI
Personalização total com Tailwind CSS
Compatível com Next.js, Vite, Remix; basicamente qualquer configuração de React

Além disso, é gratuito e open source. Vamos começar.

Passo 1: prepare o seu projeto (2 minutos)

Primeiro o mais importante. Se você parte de um projeto React existente, já sai na frente. Se não, vamos montar rápido uma app Next.js (mas isto funciona com qualquer framework 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

Diga sim ao TypeScript e ao Tailwind CSS quando perguntarem. Vamos precisar dos dois.

Se você usa Vite ou Create React App, também vale: a configuração é quase idêntica.

Passo 2: instale o Neobrutalism (1 minuto)

Agora, a mágica. Precisamos inicializar o shadcn (o Neobrutalism se apoia nele por baixo) e instalar os utilitários do Neobrutalism.

Execute este comando:


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

Vão aparecer algumas perguntas. Veja o que você deve escolher:

Style: Default
Base color: Slate (tanto faz, vamos sobrescrever)
CSS variables: Yes

Depois, instale os utils do 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

Pronto. É isso. Você já tem a base para construir interfaces brutalistas.

Passo 3: adicione o tema neobrutalista (2 minutos)

É aqui que a transformação começa de verdade. Abra o seu arquivo global.css (normalmente em app/globals.css ou src/index.css) e substitua as variáveis do tema pelo tema brutal característico do Neobrutalism.

Cole isto no seu 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;
}

O que acabou de acontecer?

Eliminamos todos os border-radius (chega de cantos arredondados)
Trocamos as sombras suaves por sombras duras e deslocadas
Configuramos um esquema de cor preto/branco/amarelo bem marcado
Adicionamos suporte ao modo escuro (porque não somos uns selvagens)

A sua app já começa a parecer diferente. Mas ainda não terminamos.

Passo 4: instale os seus primeiros componentes (2 minutos)

Vamos pegar uns componentes de verdade. Vamos começar pelo essencial: Button, Card e Input.

Execute estes comandos um a um:


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 é adicionado à sua pasta components/neobrutalism/, pronto para usar. Não precisa escrever uma única linha de CSS.

Passo 5: substitua os seus componentes (2 minutos)

Agora vem a parte divertida: substituir os seus componentes antigos e entediantes pelos novos, bem brutais.

Antes:

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

Depois:

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

Assim, sem mais nem menos, você já tem um botão com bordas pretas grossas, uma sombra dura e aquele ar neobrutalista tão característico.

Vamos fazer o mesmo com um card:

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>

Depois:

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>

Mesma estrutura, um ar completamente diferente. O card agora tem cantos afiados, bordas grossas e uma sombra dura que o faz saltar da página.

Passo 6: adicione as fontes neobrutalistas (1 minuto)

A tipografia é ENORME no neobrutalismo. As fontes de sistema padrão não vão dar conta. O Neobrutalism recomenda Archivo Black para os títulos e Space Grotesk para o corpo de texto.

Se você usa Next.js, adicione isto ao seu 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>
  );
}

Agora os seus títulos ficam maciços e marcantes, enquanto o corpo de texto se mantém limpo e legível.

Passo 7: afine e personalize (opcional)

A esta altura você basicamente terminou, mas se quiser personalizar mais a fundo, o Neobrutalism facilita.

Quer outra cor de acento? Mude a variável --primary no seu CSS.

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

Quer sombras mais suaves? Ajuste as variáveis de sombra.

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

Quer adicionar mais componentes? Explore a biblioteca completa em neobrutalism.com/docs/components. Há inputs, badges, diálogos, tabelas e muito mais, todos com aquela estética brutal.

Antes e depois: a transformação

Muito bem, vamos ver a diferença. Veja como fica uma landing page simples antes e depois da conversão neobrutalista.

Antes: uma app 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>
  );
}

O que há de errado aqui?

Nada, tecnicamente. É funcional. É limpa. Mas também é totalmente esquecível. Se você a mostrasse a 100 pessoas, elas a confundiriam com uma dúzia de outros sites que viram esta semana.

Depois: a repaginada 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>
  );
}

O que mudou?

O fundo: passou de um cinza entediante para um amarelo elétrico
A tipografia: um título marcante, em maiúsculas, com Archivo Black
As bordas: tudo tem bordas pretas grossas
As sombras: duras e deslocadas, em vez de desfoques suaves
Os cantos: zero border-radius, afiados e angulares
O ar: de "folheto corporativo" para "startup indie com atitude"

É a mesma estrutura de componentes, a mesma maquete, mas a sensação é completamente diferente. As pessoas vão se lembrar desta.

Vamos ver um exemplo mais complexo: um card de estatísticas de dashboard.

Antes: um dashboard sem graça

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

Depois: um 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>
  );
}

O que muda?

Blocos de cor: cada card tem um fundo diferente (amarelo, branco, preto)
Tipografia marcante: os números são enormes e usam a fonte display
Alto contraste: o texto branco sobre preto cria uma hierarquia visual imediata
Rótulos em maiúsculas: fazem tudo parecer mais deliberado e marcante
Setas em vez de cor: usa os símbolos ▲ e ▼ para maior clareza

Os mesmos dados, uma apresentação radicalmente diferente. A versão brutal parece segura e pensada, não só montada.

Dicas de profissional para o design neobrutalista

Agora que você domina o básico, aqui vão algumas dicas para acertar de vez a estética:

1. Abrace a assimetria

Não tenha medo de quebrar a grade. Desloque elementos, sobreponha bordas, deixe as coisas respirarem de forma desigual. A perfeição é entediante.

2. Use a cor com intenção

O neobrutalismo adora as combinações de cor de alto contraste. O preto e o branco como base, e depois adicione uma ou duas cores de acento (amarelo, rosa, ciano). Não vá de arco-íris: escolha um clima e comprometa-se.

3. Vá grande na tipografia

Os títulos devem ser ENORMES. O corpo de texto pode ser normal, mas os seus H1 devem impor atenção. Use letras marcantes, em maiúsculas, quando quiser marcar a diferença.

4. Adicione microinterações

Brutal não significa estático. Adicione efeitos de hover em que os botões se deslocam um pouco ou as sombras crescem. Mantenha sutil, mas perceptível.

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

5. Não exagere

Nem todo elemento precisa de uma borda grossa. Nem toda seção precisa de um fundo vivo. O equilíbrio continua importante, só que inclinado para a ousadia.

O que fazer em seguida

Parabéns. Você acabou de dar ao seu projeto React uma reforma visual completa em cerca de 10 minutos. Veja o que você pode fazer a partir daqui:

Explore mais componentes

O Neobrutalism tem uma biblioteca completa de componentes: badges, diálogos, tabelas, abas e mais. Dê uma olhada na documentação de componentes e descubra o que mais você pode adicionar.

Personalize o seu tema

Brinque com as variáveis CSS para encaixar com a sua marca. Mude as cores de acento, ajuste a intensidade das sombras ou afine o espaçamento para fazê-lo seu.

Construa algo legal

Agora que a sua app não parece genérica, mostre-a por aí. Compartilhe no Twitter, publique no Reddit, adicione ao seu portfólio. O neobrutalismo chama a atenção.

Entre na comunidade

O Neobrutalism tem um Discord bem ativo onde designers e desenvolvedores compartilham projetos, fazem perguntas e se empolgam com o design brutal. Apareça e mande um oi.

Considerações finais

A maioria das apps React se parece porque a maioria dos desenvolvedores recorre às mesmas ferramentas: Material UI, Bootstrap, shadcn com a configuração padrão. Não há nada de errado com elas (são ótimas), mas não vão te ajudar a se destacar.

O neobrutalismo é um atalho para a personalidade. É ousado, memorável e surpreendentemente fácil de implementar com as ferramentas certas. O Neobrutalism te dá tudo o que você precisa para dar o salto sem reconstruir do zero.

Em apenas 10 minutos, você passou de "mais uma app React" para "espera, o que é ISSO?". E, sinceramente, isso é poderoso.

Então vá em frente: faça a sua app impossível de ignorar.

Agora, lance-se e construa algo brutal. 🚀

← Voltar aos artigos

Como converter qualquer projeto React para o neobrutalismo em 10 minutos

O que diabos é o neobrutalismo, afinal?

Por que o Neobrutalism?

Passo 1: prepare o seu projeto (2 minutos)

Passo 2: instale o Neobrutalism (1 minuto)

Passo 3: adicione o tema neobrutalista (2 minutos)

Passo 4: instale os seus primeiros componentes (2 minutos)

Passo 5: substitua os seus componentes (2 minutos)

Passo 6: adicione as fontes neobrutalistas (1 minuto)

Passo 7: afine e personalize (opcional)

Antes e depois: a transformação

Antes: uma app React genérica

Depois: a repaginada neobrutalista

Outro exemplo: um widget de dashboard

Antes: um dashboard sem graça

Depois: um dashboard brutal

Dicas de profissional para o design neobrutalista

O que fazer em seguida

Considerações finais

Como criar um site neobrutalista com Tailwind CSS v4 (passo a passo)

As 8 melhores bibliotecas de animação React em 2026

20 paletas de cores neobrutalistas com códigos hex (prontas para copiar e colar)

Como converter qualquer projeto React para o neobrutalismo em 10 minutos

O que diabos é o neobrutalismo, afinal?

Por que o Neobrutalism?

Passo 1: prepare o seu projeto (2 minutos)

Passo 2: instale o Neobrutalism (1 minuto)

Passo 3: adicione o tema neobrutalista (2 minutos)

Passo 4: instale os seus primeiros componentes (2 minutos)

Passo 5: substitua os seus componentes (2 minutos)

Passo 6: adicione as fontes neobrutalistas (1 minuto)

Passo 7: afine e personalize (opcional)

Antes e depois: a transformação

Antes: uma app React genérica

Depois: a repaginada neobrutalista

Outro exemplo: um widget de dashboard

Antes: um dashboard sem graça

Depois: um dashboard brutal

Dicas de profissional para o design neobrutalista

O que fazer em seguida

Considerações finais

Continue lendo

Como criar um site neobrutalista com Tailwind CSS v4 (passo a passo)

As 8 melhores bibliotecas de animação React em 2026

20 paletas de cores neobrutalistas com códigos hex (prontas para copiar e colar)