آموزش کامل ShadCN UI در پروژه‌های React و Next.js

در دنیای توسعه رابط کاربری با React و Next.js، استفاده از کتابخانه‌های کامپوننتی مانند ShadCN UI به توسعه سریع‌تر، طراحی زیباتر، و تجربه کاربری حرفه‌ای‌تر کمک می‌کند.
ShadCN UI ترکیبی از زیبایی طراحی Tailwind CSS، انعطاف‌پذیری Radix UI و قدرت سرورهای Next.js را در اختیار شما می‌گذارد.

در این مقاله، به‌صورت قدم‌به‌قدم ، نحوه نصب، استفاده، و سفارشی‌سازی کامپوننت‌های ShadCN را بررسی می‌کنیم.

ShadCN UI چیست؟

ShadCN UI مجموعه‌ای از کامپوننت‌های قابل استفاده مجدد (Reusable Components) برای React/Next.js است که بر پایه‌ی:

• Tailwind CSS
• Radix UI
• React Server Components
• TypeScript

ساخته شده و به شما اجازه می‌دهد کامپوننت‌های زیبا، قابل کنترل و کاملاً ماژولار بسازید.

آیا میدانید مدرسه پرنیان، دوره آموزش طراحی سایت حرفه ای بصورت حضوری و مجازی برگزار میکند؟کلیک کنید

نصب و راه‌اندازی ShadCN UI در Next.js

مرحله ۱: ساخت پروژه Next.js

npx create-next-app@latest my-shadcn-app
cd my-shadcn-app

مرحله ۲: نصب ShadCN CLI

npx shadcn-ui@latest init

در حین نصب، CLI از شما مسیر فولدر کامپوننت‌ها، استفاده از TypeScript، انتخاب تم، و استفاده از Tailwind CSS را می‌پرسد. کافی است گزینه‌ها را تأیید کنید.

اضافه کردن کامپوننت با ShadCN

برای اضافه کردن هر کامپوننت آماده کافیست دستور زیر را اجرا کنید:

npx shadcn-ui@latest add button

بعد از اجرای این دستور، یک کامپوننت Button.tsx به مسیر components/ui شما اضافه خواهد شد.

مثال عملی: ساخت فرم ورود (Login Form) با استفاده از ShadCN UI

۱. افزودن کامپوننت‌های مورد نیاز

npx shadcn-ui@latest add input
npx shadcn-ui@latest add label
npx shadcn-ui@latest add button

۲. ساخت فرم در components/LoginForm.tsx

'use client'

import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

export function LoginForm() {
  return (
    <form className="space-y-4 max-w-sm mx-auto mt-10">
      <div>
        <Label htmlFor="email">Email</Label>
        <Input id="email" type="email" placeholder="you@example.com" />
      </div>
      <div>
        <Label htmlFor="password">Password</Label>
        <Input id="password" type="password" placeholder="••••••••" />
      </div>
      <Button type="submit" className="w-full">Login</Button>
    </form>
  )
}

۳. استفاده از فرم در صفحه

در فایل app/page.tsx یا pages/index.tsx:

import { LoginForm } from "@/components/LoginForm"

export default function Home() {
  return (
    <main className="min-h-screen flex items-center justify-center">
      <LoginForm />
    </main>
  )
}

نکات پیشرفته در ShadCN UI

• تم‌های تاریک و روشن (Dark/Light Mode): با Tailwind و سیستم کلاس‌ها به راحتی قابل فعال‌سازی است.
• قابلیت سفارشی‌سازی بالا: هر کامپوننت به صورت محلی در فولدر شما قرار دارد و می‌توانید آن را مستقیماً ویرایش کنید.
• پشتیبانی از Server Components: سازگار با معماری جدید Next.js 13/14/15.

مثال عملی: ساخت Modal تأیید حذف با ShadCN UI

مرحله ۱: افزودن کامپوننت‌های موردنیاز

npx shadcn-ui@latest add dialog
npx shadcn-ui@latest add button

مرحله ۲: ساخت کامپوننت DeleteConfirmModal.tsx

'use client'

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"

export function DeleteConfirmModal() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="destructive">Delete</Button>
      </DialogTrigger>

      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you sure?</DialogTitle>
        </DialogHeader>

        <p>This action cannot be undone. This will permanently delete the item.</p>

        <DialogFooter>
          <Button variant="outline">Cancel</Button>
          <Button variant="destructive">Yes, Delete</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

مرحله ۳: استفاده در صفحه page.tsx

import { DeleteConfirmModal } from "@/components/DeleteConfirmModal"

export default function Home() {
  return (
    <main className="min-h-screen flex items-center justify-center">
      <DeleteConfirmModal />
    </main>
  )
}

کتابخانه ShadCN UI یکی از بهترین انتخاب‌ها برای طراحی رابط کاربری زیبا، قابل کنترل و ماژولار در پروژه‌های React و Next.js است. با نصب ساده، سفارشی‌سازی بالا و هماهنگی کامل با Tailwind، شما می‌توانید رابط‌های پیچیده را با کدهای خوانا و تمیز بسازید.

امیدواریم از این مقاله آموزش کامل ShadCN UI در پروژه‌های React و Next.js نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.