بخشها
کامپوننتها
1. پروژهٔ خود را بسازید#
یک پروژهٔ جدید React + TypeScript با Vite بسازید:
pnpm create vite@latest my-app -- --template react-tsnpm create vite@latest my-app -- --template react-tsyarn create vite@latest my-app -- --template react-tsbun create vite@latest my-app -- --template react-ts
2. نصب Tailwind CSS#
pnpm add tailwindcss @tailwindcss/vitenpm install tailwindcss @tailwindcss/viteyarn add tailwindcss @tailwindcss/vitebun add tailwindcss @tailwindcss/vite
همهٔ محتوای src/index.css را با این جایگزین کنید:
@import "tailwindcss";3. پیکربندی نامهای مستعار مسیر#
baseUrl و paths را هم به tsconfig.json و هم به tsconfig.app.json اضافه کنید تا نام مستعار
@/* حل شود:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}4. بهروزرسانی vite.config.ts#
تایپهای Node را نصب کنید، سپس به Vite بیاموزید که نام مستعار را حل کند:
pnpm add -D @types/nodenpm install -D @types/nodeyarn add -D @types/nodebun add -D @types/node
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 initnpx shadcn@latest inityarn dlx shadcn@latest initbunx --bun shadcn@latest init
6. افزودن registry مربوط به Neobrutalism + پوسته#
registryهای 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/buttonnpx shadcn@latest add @neobrutalism/buttonyarn dlx shadcn@latest add @neobrutalism/buttonbunx --bun shadcn@latest add @neobrutalism/button
همین. نسخهٔ Radix یا Base UI هر مؤلفهای را به همین روش اضافه کنید.