Saltar al contenido
1.6k

Next.js

Configura Neobrutalism en un proyecto de Next.js.

1. Crear tu proyecto

Crea una nueva aplicación de Next.js, o sáltate este paso para partir de un proyecto 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. Ejecutar la inicialización

Inicializa shadcn en tu proyecto. Esto crea un components.json y configura tus rutas y Tailwind:

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

3. Añadir el registro de Neobrutalism

Añade los registros de Neobrutalism a tu components.json:

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

4. Añadir las fuentes y el tema

Sigue los pasos de Fuentes y tema para conseguir la estética característica de Neobrutalism: títulos en Archivo Black, texto del cuerpo en Space Grotesk y los tokens neobrutalistas de color y sombra.

5. Añadir un 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

Después impórtalo y úsalo:

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

Eso es todo 🚀 — añade la variante Radix o Base UI de cualquier componente de la misma forma.