सामग्री पर जाएँ
1.6k

Next.js

Next.js प्रोजेक्ट में Neobrutalism सेट करें।

1. अपना प्रोजेक्ट बनाएँ

नया Next.js ऐप बनाएँ, या मौजूदा ऐप उपयोग करने के लिए इस चरण को छोड़ दें:

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. init चलाएँ

अपने प्रोजेक्ट में shadcn इनिशियलाइज़ करें। इससे एक components.json बनता है और आपके पाथ व Tailwind कॉन्फ़िगर हो जाते हैं:

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

3. Neobrutalism रजिस्ट्री जोड़ें

अपने components.json में Neobrutalism रजिस्ट्री जोड़ें:

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

4. फ़ॉन्ट और थीम जोड़ें

Neobrutalism का सिग्नेचर लुक पाने के लिए फ़ॉन्ट और थीम के चरण फ़ॉलो करें — Archivo Black हेडिंग, Space Grotesk बॉडी टेक्स्ट, और नियोब्रूटलिस्ट रंग व शैडो टोकन।

5. कंपोनेंट जोड़ें

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

फिर उसे import करके उपयोग करें:

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

बस इतना ही 🚀 — किसी भी कंपोनेंट का Radix या Base UI वैरिएंट उसी तरह जोड़ें।