Aller au contenu
1.6k

Next.js

Mettez en place Neobrutalism dans un projet Next.js.

1. Créer votre projet

Créez une nouvelle application Next.js, ou passez cette étape pour partir d’un projet existant :

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. Lancer l’initialisation

Initialisez shadcn dans votre projet. Cela crée un components.json et configure vos chemins et Tailwind :

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

3. Ajouter le registre Neobrutalism

Ajoutez les registres Neobrutalism à votre components.json :

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

4. Ajouter les polices & le thème

Suivez les étapes Polices & thème pour obtenir l’allure caractéristique de Neobrutalism — titres en Archivo Black, texte courant en Space Grotesk, et les tokens néobrutalistes de couleur et d’ombre.

5. Ajouter un composant

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

Importez-le ensuite et utilisez-le :

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

Et voilà 🚀 — ajoutez la variante Radix ou Base UI de n’importe quel composant de la même façon.