Aller au contenu
1.6k

Installation

Installez des composants React néobrutalistes avec une seule commande de la CLI shadcn — sans paquet ni configuration. Avec les polices et les tokens Tailwind v4 du look signature.

Neobrutalism.com Il s'agit d'un registre dédié à l'shadcn CLI. Il n'y a aucun paquet à installer ni aucun fournisseur dans lequel intégrer votre application : l'CLI copie le code source de chaque composant depuis neobrutalism.com dans votre projet, et à partir de là, ce code vous appartient.

L'installation se fait en trois étapes et prend environ cinq minutes :

  1. Installer un composant : une seule commande, aucune configuration.
  2. Ajoutez les polices suivantes : « Archivo Black » pour les titres et « Space Grotesk » pour le corps du texte.
  3. Ajoutez les éléments caractéristiques du thème : les bordures, les ombres et la palette de couleurs qui en font un style néo-brutaliste.

Installer un composant

Chaque composant est disponible en deux versions : Base UI et Radix UI. C'est l'URL d'installation qui détermine laquelle vous obtenez :

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

Voilà, c'est tout ce qu'il y a à savoir sur l'installation. Remplacez button par n'importe quel composant : le modèle est toujours https://neobrutalism.com/r/<base|radix>/<component>.json, et chaque page de composant indique la commande exacte pour les deux variantes.

Ajoutez les polices

Les titres sont définis dans Archivo Black, et le corps du texte dans Space Grotesk. Avec Next.js, chargez-les à partir de 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>
  )
}

Ajouter le thème

Insérez ces éléments dans votre fichier globals.css. Les ombres à décalage net et l'effet «--radius: 0» font l'essentiel du travail — le reste concerne la palette de couleurs, et l'ensemble correspond à une personnalisation Tailwind v4 standard que vous pourrez modifier ultérieurement :

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

Vous lancez un nouveau projet ?

Les guides du framework vous accompagnent tout au long du processus, dès la première commande :

  • Next.js — « create-next-app », initialisation, polices, thème, premier composant.
  • Vite — Tailwind, alias de chemin, initialisation, premier composant.

Prévisualisez avant l'installation

Consultez le code source de n'importe quel composant depuis le 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

Espaces de noms du registre (facultatif)

Les URL complètes suffisent amplement. Toutefois, si vous configurez le serveur MCP — qui résout les composants via des registres nommés — ou si vous souhaitez utiliser les commandes search et list de l'CLI, créez un alias pour le registre dans votre fichier components.json :

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

Une fois l'alias configuré, l'CLIe peut explorer l'intégralité du registre :

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

Configurez l'CLI pour qu'il pointe vers l'espace de travail approprié à l'adresse -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

Vous avez besoin d'aide ?

Vous avez un problème ? Notre serveur Discord est très actif — n'hésitez pas à venir nous dire bonjour.