دیگ

نصب

دیگ یک پکیج نیست؛ کد کامپوننت‌ها با CLI اختصاصی دیگ مستقیم وارد پروژهٔ خودتان می‌شود و مالک کامل آن هستید. کامپوننت‌ها برای چهار فریم‌ورک پورت شده‌اند و کلاس‌های Tailwind و توکن‌های رنگ در هر چهار نسخه یکسان است.

ری‌اکت ۱۹ و Next.js با پیاده‌سازی دسترس‌پذیری داخلی دیگویو ۳ با Composition API و Reka UISvelte ۵ با runes و Bits UIانگولار با signals و Angular CDK

  1. ساخت پروژه Next.js

    پکیج‌منیجر پیش‌فرض Node.jsنصب سریع با لینک سخت و دیسک مشترکYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
    npm create next-app@latest my-app -- --typescript --tailwind --eslint --app --src-dir
    pnpm create next-app@latest my-app --typescript --tailwind --eslint --app --src-dir
    yarn create next-app@latest my-app --typescript --tailwind --eslint --app --src-dir
    bun create next-app@latest my-app --typescript --tailwind --eslint --app --src-dir

  2. راه‌اندازی دیگ

    پکیج‌منیجر پیش‌فرض Node.jsنصب سریع با لینک سخت و دیسک مشترکYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
    npx dig-ui@latest init
    pnpm dlx dig-ui@latest init
    yarn dlx dig-ui@latest init
    bunx --bun dig-ui@latest init

  3. نصب کامپوننت از رجیستری دیگ

    هر کامپوننت دیگ یک آدرس رجیستری دارد؛ مثلاً برای دکمه:

    پکیج‌منیجر پیش‌فرض Node.jsنصب سریع با لینک سخت و دیسک مشترکYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
    npx dig-ui@latest add https://docs.digdesign.ir/r/button.json
    pnpm dlx dig-ui@latest add https://docs.digdesign.ir/r/button.json
    yarn dlx dig-ui@latest add https://docs.digdesign.ir/r/button.json
    bunx --bun dig-ui@latest add https://docs.digdesign.ir/r/button.json

  4. تنظیم راست‌به‌چپ و فونت

    layout.tsx
    import { Vazirmatn } from "next/font/google"

const vazirmatn = Vazirmatn({
  variable: "--font-vazirmatn",
  subsets: ["arabic"],
})

<html lang="fa" dir="rtl" className={vazirmatn.variable}>

فهرست کامل آیتم‌های این فریم‌ورک در /r/registry.json در دسترس است.

  1. ساخت پروژه Vue

    در ویزارد، TypeScript را روشن کنید.

    پکیج‌منیجر پیش‌فرض Node.jsنصب سریع با لینک سخت و دیسک مشترکYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
    npm create vue@latest my-app
    pnpm create vue@latest my-app
    yarn create vue@latest my-app
    bun create vue@latest my-app

  2. نصب Tailwind و وابستگی‌ها

    دیگ برای Vue هنوز CLI اختصاصی ندارد، پس این مرحله دستی است.

    پکیج‌منیجر پیش‌فرض Node.jsنصب سریع با لینک سخت و دیسک مشترکYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
    npm install tailwindcss @tailwindcss/postcss postcss reka-ui class-variance-authority clsx tailwind-merge
    pnpm add tailwindcss @tailwindcss/postcss postcss reka-ui class-variance-authority clsx tailwind-merge
    yarn add tailwindcss @tailwindcss/postcss postcss reka-ui class-variance-authority clsx tailwind-merge
    bun add tailwindcss @tailwindcss/postcss postcss reka-ui class-variance-authority clsx tailwind-merge

  3. برداشتن کد کامپوننت

    از تب «دستی» در صفحهٔ هر کامپوننت، فایل را در src/components/ui/ کپی کنید. فایل رجیستری هم برای ابزارهای خودتان در دسترس است:

    curl -O https://docs.digdesign.ir/r/vue/button.json

  4. تنظیم راست‌به‌چپ و فونت

    index.html + main.css
    <!-- index.html -->
<html lang="fa" dir="rtl">

/* src/assets/main.css */
@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap");

:root {
  --font-vazirmatn: "Vazirmatn", sans-serif;
}

فهرست کامل آیتم‌های این فریم‌ورک در /r/vue/registry.json در دسترس است.

  1. ساخت پروژه SvelteKit

    پکیج‌منیجر پیش‌فرض Node.jsنصب سریع با لینک سخت و دیسک مشترکYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
    npx sv create my-app
    pnpm dlx sv create my-app
    yarn dlx sv create my-app
    bunx --bun sv create my-app

  2. نصب Tailwind و وابستگی‌ها

    دیگ برای Svelte هنوز CLI اختصاصی ندارد، پس این مرحله دستی است.

    پکیج‌منیجر پیش‌فرض Node.jsنصب سریع با لینک سخت و دیسک مشترکYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
    npm install tailwindcss @tailwindcss/postcss postcss bits-ui class-variance-authority clsx tailwind-merge
    pnpm add tailwindcss @tailwindcss/postcss postcss bits-ui class-variance-authority clsx tailwind-merge
    yarn add tailwindcss @tailwindcss/postcss postcss bits-ui class-variance-authority clsx tailwind-merge
    bun add tailwindcss @tailwindcss/postcss postcss bits-ui class-variance-authority clsx tailwind-merge

  3. برداشتن کد کامپوننت

    از تب «دستی» در صفحهٔ هر کامپوننت، فایل را در src/lib/components/ui/ کپی کنید. فایل رجیستری هم برای ابزارهای خودتان در دسترس است:

    curl -O https://docs.digdesign.ir/r/svelte/button.json

  4. تنظیم راست‌به‌چپ و فونت

    app.html + app.css
    <!-- src/app.html -->
<html lang="fa" dir="rtl">

/* src/app.css */
@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap");

:root {
  --font-vazirmatn: "Vazirmatn", sans-serif;
}

فهرست کامل آیتم‌های این فریم‌ورک در /r/svelte/registry.json در دسترس است.

  1. ساخت پروژه Angular

    ng new my-app --style=css --routing

  2. نصب Tailwind و وابستگی‌ها

    دیگ برای Angular هنوز CLI اختصاصی ندارد، پس این مرحله دستی است.

    پکیج‌منیجر پیش‌فرض Node.jsنصب سریع با لینک سخت و دیسک مشترکYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
    npm install tailwindcss @tailwindcss/postcss postcss class-variance-authority clsx tailwind-merge
    pnpm add tailwindcss @tailwindcss/postcss postcss class-variance-authority clsx tailwind-merge
    yarn add tailwindcss @tailwindcss/postcss postcss class-variance-authority clsx tailwind-merge
    bun add tailwindcss @tailwindcss/postcss postcss class-variance-authority clsx tailwind-merge

  3. برداشتن کد کامپوننت

    از تب «دستی» در صفحهٔ هر کامپوننت، فایل دایرکتیو را در src/components/ui/ کپی کنید. فایل رجیستری هم برای ابزارهای خودتان در دسترس است:

    curl -O https://docs.digdesign.ir/r/angular/button.json

  4. تنظیم راست‌به‌چپ و فونت

    index.html + styles.css
    <!-- src/index.html -->
<html lang="fa" dir="rtl">

/* src/styles.css */
@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap");

:root {
  --font-vazirmatn: "Vazirmatn", sans-serif;
}

  5. استفاده از دایرکتیو

    دایرکتیوها standalone هستند؛ فقط آن‌ها را به imports کامپوننت اضافه کنید. پریمیتیوهای پیچیده‌تر (دیالوگ، منو) روی Angular CDK خواهند نشست.

    app.component.ts
    import { DigButton } from "@/components/ui/button"

@Component({
  standalone: true,
  imports: [DigButton],
  template: `<button digButton>ذخیره</button>`,
})

فهرست کامل آیتم‌های این فریم‌ورک در /r/angular/registry.json در دسترس است.

استفاده در ابزارهای هوش مصنوعی

دستیارهای کدنویسی مثل Claude Code، Cursor، Windsurf و GitHub Copilot CLI می‌توانند مستقیم از رجیستری دیگ کامپوننت نصب کنند؛ کافی‌ست آدرس رجیستری را در پرامپت یا فایل راهنمای پروژه به آن‌ها بدهید، لازم نیست کد کامپوننت را برایشان توضیح دهید یا کپی‌پیست کنید.

  1. نصب یک کامپوننت با پرامپت

    در چت دستیار (مثلاً Claude Code یا Cursor) کافی‌ست آدرس رجیستری را بدهید تا خودش کامپوننت و وابستگی‌هایش را اضافه کند:

    کامپوننت دکمه رو از این آدرس رجیستری به پروژه اضافه کن:
https://docs.digdesign.ir/r/button.json

  2. معرفی کل رجیستری به agent

    تا دستیار بدون پرسیدن بداند چه کامپوننت‌هایی موجودند و ترجیح بدهد به‌جای نوشتن UI از صفر، از دیگ استفاده کند، آدرس فهرست کامل رجیستری را در فایل راهنمای پروژه (مثلاً AGENTS.md یا CLAUDE.md) بگذارید:

    AGENTS.md
    ## دیزاین سیستم دیگ

برای هر نیاز به کامپوننت UI، اول رجیستری دیگ را بررسی کن:
https://docs.digdesign.ir/r/registry.json

اگر کامپوننت مدنظر آن‌جا بود، آن را از آدرس رجیستری‌اش نصب کن؛ کامپوننت را از صفر ننویس. کلاس‌های Tailwind و توکن‌های رنگ باید همان‌هایی باشند که در تم پروژه تعریف شده‌اند.

  3. یا مستقیم از ترمینال agent

    اغلب این ابزارها دسترسی به ترمینال دارند؛ همان دستوری که خودتان اجرا می‌کنید را می‌توانید از آن‌ها هم بخواهید:

    پکیج‌منیجر پیش‌فرض Node.jsنصب سریع با لینک سخت و دیسک مشترکYarn نسخهٔ ۲ به بالا (Berry)رانتایم و پکیج‌منیجر Bun
    npx dig-ui@latest add https://docs.digdesign.ir/r/button.json
    pnpm dlx dig-ui@latest add https://docs.digdesign.ir/r/button.json
    yarn dlx dig-ui@latest add https://docs.digdesign.ir/r/button.json
    bunx --bun dig-ui@latest add https://docs.digdesign.ir/r/button.json

  1. نصب یک کامپوننت با پرامپت

    در چت دستیار (مثلاً Claude Code یا Cursor) کافی‌ست آدرس رجیستری را بدهید تا خودش کامپوننت و وابستگی‌هایش را اضافه کند:

    کامپوننت دکمه رو از این آدرس رجیستری به پروژه اضافه کن:
https://docs.digdesign.ir/r/vue/button.json

  2. معرفی کل رجیستری به agent

    تا دستیار بدون پرسیدن بداند چه کامپوننت‌هایی موجودند و ترجیح بدهد به‌جای نوشتن UI از صفر، از دیگ استفاده کند، آدرس فهرست کامل رجیستری را در فایل راهنمای پروژه (مثلاً AGENTS.md یا CLAUDE.md) بگذارید:

    AGENTS.md
    ## دیزاین سیستم دیگ

برای هر نیاز به کامپوننت UI، اول رجیستری دیگ را بررسی کن:
https://docs.digdesign.ir/r/vue/registry.json

اگر کامپوننت مدنظر آن‌جا بود، آن را از آدرس رجیستری‌اش نصب کن؛ کامپوننت را از صفر ننویس. کلاس‌های Tailwind و توکن‌های رنگ باید همان‌هایی باشند که در تم پروژه تعریف شده‌اند.

  1. نصب یک کامپوننت با پرامپت

    در چت دستیار (مثلاً Claude Code یا Cursor) کافی‌ست آدرس رجیستری را بدهید تا خودش کامپوننت و وابستگی‌هایش را اضافه کند:

    کامپوننت دکمه رو از این آدرس رجیستری به پروژه اضافه کن:
https://docs.digdesign.ir/r/svelte/button.json

  2. معرفی کل رجیستری به agent

    تا دستیار بدون پرسیدن بداند چه کامپوننت‌هایی موجودند و ترجیح بدهد به‌جای نوشتن UI از صفر، از دیگ استفاده کند، آدرس فهرست کامل رجیستری را در فایل راهنمای پروژه (مثلاً AGENTS.md یا CLAUDE.md) بگذارید:

    AGENTS.md
    ## دیزاین سیستم دیگ

برای هر نیاز به کامپوننت UI، اول رجیستری دیگ را بررسی کن:
https://docs.digdesign.ir/r/svelte/registry.json

اگر کامپوننت مدنظر آن‌جا بود، آن را از آدرس رجیستری‌اش نصب کن؛ کامپوننت را از صفر ننویس. کلاس‌های Tailwind و توکن‌های رنگ باید همان‌هایی باشند که در تم پروژه تعریف شده‌اند.

  1. نصب یک کامپوننت با پرامپت

    در چت دستیار (مثلاً Claude Code یا Cursor) کافی‌ست آدرس رجیستری را بدهید تا خودش کامپوننت و وابستگی‌هایش را اضافه کند:

    کامپوننت دکمه رو از این آدرس رجیستری به پروژه اضافه کن:
https://docs.digdesign.ir/r/angular/button.json

  2. معرفی کل رجیستری به agent

    تا دستیار بدون پرسیدن بداند چه کامپوننت‌هایی موجودند و ترجیح بدهد به‌جای نوشتن UI از صفر، از دیگ استفاده کند، آدرس فهرست کامل رجیستری را در فایل راهنمای پروژه (مثلاً AGENTS.md یا CLAUDE.md) بگذارید:

    AGENTS.md
    ## دیزاین سیستم دیگ

برای هر نیاز به کامپوننت UI، اول رجیستری دیگ را بررسی کن:
https://docs.digdesign.ir/r/angular/registry.json

اگر کامپوننت مدنظر آن‌جا بود، آن را از آدرس رجیستری‌اش نصب کن؛ کامپوننت را از صفر ننویس. کلاس‌های Tailwind و توکن‌های رنگ باید همان‌هایی باشند که در تم پروژه تعریف شده‌اند.