Pular para o conteúdo
1.6k

Next.js

Configure o Neobrutalism em um projeto Next.js.

1. Criar o seu projeto

Crie um novo aplicativo Next.js, ou pule este passo para partir de um projeto existente:

pnpm create next-app@latest my-app --typescript --tailwind --app
npx create-next-app@latest my-app --typescript --tailwind --app
yarn create next-app@latest my-app --typescript --tailwind --app
bunx --bun create-next-app@latest my-app --typescript --tailwind --app

2. Executar a inicialização

Inicialize o shadcn no seu projeto. Isso cria um components.json e configura os seus caminhos e o Tailwind:

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

3. Adicionar o registro do Neobrutalism

Adicione os registros do Neobrutalism ao seu components.json:

components.json
{
  "registries": {
    "@neobrutalism": "https://neobrutalism.com/r/radix/{name}.json",
    "@neobrutalism-base": "https://neobrutalism.com/r/base/{name}.json"
  }
}

4. Adicionar as fontes e o tema

Siga os passos de Fontes e tema para conseguir a estética característica do Neobrutalism: títulos em Archivo Black, texto do corpo em Space Grotesk e os tokens neobrutalistas de cor e sombra.

5. Adicionar um componente

pnpm dlx shadcn@latest add @neobrutalism/button
npx shadcn@latest add @neobrutalism/button
yarn dlx shadcn@latest add @neobrutalism/button
bunx --bun shadcn@latest add @neobrutalism/button

Depois importe-o e use-o:

import { Button } from "@/components/ui/button"
 
export default function Page() {
  return <Button>Click me</Button>
}

Pronto 🚀 — adicione a variante Radix ou Base UI de qualquer componente da mesma forma.