Saltar al contenido
1.6k

Installation

Instala componentes neobrutalistas de React con un solo comando de la CLI de shadcn: sin paquetes ni configuración. Incluye las fuentes y los tokens de Tailwind v4 del look característico.

Neobrutalism.com Es un registro para el proyecto «shadcn» (CLI). No hay que instalar ningún paquete ni utilizar ningún proveedor para integrar tu aplicación: el CLI copia el código fuente de cada componente desde neobrutalism.com a tu proyecto y, a partir de ahí, el código ya es tuyo.

La configuración se hace en tres pasos y te llevará unos cinco minutos:

  1. Instala un componente: un solo comando, sin configuración.
  2. Añade las fuentes: «Archivo Black» para los títulos y «Space Grotesk» para el cuerpo del texto.
  3. Añade los elementos característicos del estilo: los bordes, las sombras y la paleta de colores que lo definen como neobrutalismo.

Instalar un componente

Cada componente se ofrece en dos versiones: Base UI y Radix UI. La URL de instalación determina cuál te toca:

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
pnpm dlx shadcn@latest add https://neobrutalism.com/r/radix/button.json
npx shadcn@latest add https://neobrutalism.com/r/radix/button.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/radix/button.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/radix/button.json

Y eso es todo lo que hay que saber sobre la instalación. Cambia button por cualquier componente: el patrón siempre es https://neobrutalism.com/r/<base|radix>/<component>.json, y en la página de cada componente aparece el comando exacto para ambas variantes.

Añade las fuentes

Los encabezados están configurados en Archivo Black, y el texto del cuerpo en Space Grotesk. Con Next.js, cárgalos desde next/font/google:

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"],
  variable: "--font-sans",
  display: "swap",
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={`${archivoBlack.variable} ${spaceGrotesk.variable}`}>
        {children}
      </body>
    </html>
  )
}

Añade el tema

Añade estos tokens a tu archivo «globals.css». Las sombras con desplazamiento duro y el «--radius: 0» se encargan de casi todo; el resto es cuestión de la paleta de colores, y todo ello forma parte de la personalización estándar de Tailwind v4, que puedes cambiar más adelante:

globals.css
@import "tailwindcss";
 
@theme inline {
  --font-head: var(--font-head);
  --font-sans: var(--font-sans);
  --radius: var(--radius);
 
  --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-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary-hover: var(--primary-hover);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
}
 
:root {
  --radius: 0;
  --background: #fff7e8;
  --foreground: #000;
  --card: #fff;
  --card-foreground: #000;
  --primary: #ffdc58;
  --primary-hover: #ffd12e;
  --primary-foreground: #000;
  --secondary: #000;
  --secondary-foreground: #fff;
  --muted: #efe7d6;
  --muted-foreground: #6b6355;
  --accent: #ffe7a3;
  --accent-foreground: #000;
  --destructive: #e63946;
  --destructive-foreground: #fff;
  --border: #000;
  --input: #fff;
  --ring: #000;
}
 
.dark {
  --background: #1a1815;
  --foreground: #f5f0e6;
  --card: #262320;
  --card-foreground: #f5f0e6;
  --primary: #ffdc58;
  --primary-hover: #ffd12e;
  --primary-foreground: #000;
  --secondary: #3a352f;
  --secondary-foreground: #f5f0e6;
  --muted: #2e2a24;
  --muted-foreground: #b3ac9e;
  --accent: #38342b;
  --accent-foreground: #f5f0e6;
  --destructive: #ff6b6b;
  --destructive-foreground: #1a1815;
  --border: #000;
  --input: #262320;
  --ring: #ffdc58;
}

¿Vas a empezar un proyecto nuevo?

Las guías del marco te van explicando todo, empezando por el primer comando:

  • Next.js — create-next-app, configuración inicial, fuentes, tema, primer componente.
  • Vite — Tailwind, alias de rutas, init, primer componente.

Echa un vistazo antes de instalarlo

Echa un vistazo al código fuente de cualquier componente desde el terminal:

pnpm dlx shadcn@latest view https://neobrutalism.com/r/base/button.json
npx shadcn@latest view https://neobrutalism.com/r/base/button.json
yarn dlx shadcn@latest view https://neobrutalism.com/r/base/button.json
bunx --bun shadcn@latest view https://neobrutalism.com/r/base/button.json

Espacios de nombres del Registro (opcional)

Las URL completas son todo lo que necesitas. Pero si estás configurando el servidor MCP —que resuelve componentes a través de registros con nombre— o si quieres usar los comandos search y list de CLI, crea un alias para el registro en tu components.json:

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

Una vez configurado el alias, el CLI puede explorar todo el registro:

pnpm dlx shadcn@latest search @neobrutalism
npx shadcn@latest search @neobrutalism
yarn dlx shadcn@latest search @neobrutalism
bunx --bun shadcn@latest search @neobrutalism
pnpm dlx shadcn@latest list @neobrutalism
npx shadcn@latest list @neobrutalism
yarn dlx shadcn@latest list @neobrutalism
bunx --bun shadcn@latest list @neobrutalism

Monorepos

Dirige el CLI al espacio de trabajo correcto con -c / --cwd:

pnpm dlx shadcn@latest init -c ./apps/web
npx shadcn@latest init -c ./apps/web
yarn dlx shadcn@latest init -c ./apps/web
bunx --bun shadcn@latest init -c ./apps/web
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/button.json -c ./apps/web
npx shadcn@latest add https://neobrutalism.com/r/base/button.json -c ./apps/web
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/button.json -c ./apps/web
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/button.json -c ./apps/web

¿Necesitas ayuda?

¿Te has atascado con algo? El Discord está activo; pásate a saludar.