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

Vite

Vite + React प्रोजेक्ट में Neobrutalism सेट करें।

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

Vite से नया React + TypeScript प्रोजेक्ट बनाएँ:

pnpm create vite@latest my-app -- --template react-ts
npm create vite@latest my-app -- --template react-ts
yarn create vite@latest my-app -- --template react-ts
bun create vite@latest my-app -- --template react-ts

2. Tailwind CSS इंस्टॉल करें

pnpm add tailwindcss @tailwindcss/vite
npm install tailwindcss @tailwindcss/vite
yarn add tailwindcss @tailwindcss/vite
bun add tailwindcss @tailwindcss/vite

src/index.css की पूरी सामग्री को इससे बदलें:

src/index.css
@import "tailwindcss";

3. पाथ एलियास कॉन्फ़िगर करें

@/* एलियास रिज़ॉल्व हो सके, इसके लिए tsconfig.json और tsconfig.app.json दोनों में baseUrl और paths जोड़ें:

tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

4. vite.config.ts अपडेट करें

Node टाइप इंस्टॉल करें, फिर Vite को एलियास रिज़ॉल्व करना सिखाएँ:

pnpm add -D @types/node
npm install -D @types/node
yarn add -D @types/node
bun add -D @types/node
vite.config.ts
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
 
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

5. init चलाएँ

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

6. Neobrutalism रजिस्ट्री + थीम जोड़ें

अपने components.json में Neobrutalism रजिस्ट्री जोड़ें, फिर फ़ॉन्ट और थीम सेट करें:

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

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

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

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