यदि आप एक वेब डेवलपर हैं, तो संभावना है कि आपने shadcn/ui के बारे में सुना होगा, जो रेडिक्स यूआई पर आधारित सबसे लोकप्रिय घटक पुस्तकालयों में से एक है। इस पोस्ट में हम जानेंगे कि मौजूदा प्रोजेक्ट में shadcn कैसे जोड़ें।

इस पर निर्भर करता है कि आपका प्रोजेक्ट कैसे सेटअप किया गया है और आप किस ढांचे का उपयोग कर रहे हैं, आपके मौजूदा प्रोजेक्ट में शेडसीएन जोड़ना अलग-अलग होगा। इस लाइब्रेरी का उपयोग करते समय shadcn टाइपस्क्रिप्ट का उपयोग करने की अनुशंसा की जाती है। फिर भी, जावास्क्रिप्ट संस्करण भी उपलब्ध है।

अपने प्रोजेक्ट में shadcn जोड़ने के लिए सबसे पहले आपको टेलविंड CSS इंस्टॉल करना होगा यदि आपका प्रोजेक्ट इसका उपयोग नहीं कर रहा है, क्योंकि shadcn घटकों को इसके साथ स्टाइल किया गया है।

टेलविंड सीएसएस सेटअप करने के लिए उनकी वेबसाइट से इंस्टॉलेशन निर्देशों का पालन करें।

शेडकन और फ्रेमवर्क

यदि आप नेक्स्ट.जेएस, वाइट, रीमिक्स, एस्ट्रो या लारवेल का उपयोग कर रहे हैं, तो इस कमांड के साथ अपना प्रोजेक्ट सेटअप करने के लिए shadcn-ui चलाएं:

npx shadcn-ui@latest init

आपको अपने प्रोजेक्ट के आधार पर सेटअप पूरा करने के लिए कुछ सवालों के जवाब देने होंगे, जैसे टाइपस्क्रिप्ट या जावास्क्रिप्ट चुनना, जो भी आपका प्रोजेक्ट उपयोग कर रहा है।

बाद में आप अपने इच्छित किसी भी shadcn घटक को स्थापित करने में सक्षम होंगे, उदाहरण के लिए बटन जोड़ने के लिए:

npx shadcn-ui@latest add button

फिर इसे अपने प्रोजेक्ट में उपयोग करने के लिए घटकों/यूआई से आयात करें।

शैडकन मैनुअल इंस्टालेशन

उदाहरण के लिए रिएक्ट प्रोजेक्ट में मैन्युअल रूप से shadcn इंस्टॉल करने के लिए फिर से सुनिश्चित करें कि टेलविंड सीएसएस सही तरीके से इंस्टॉल किया गया है।

फिर निर्भरताएँ जोड़ें:

npm install tailwindcss-animate class-variance-authority clsx tailwind-merge

आइकॉन लाइब्रेरी जोड़ें:

npm install lucide-react

पथ उपनाम कॉन्फ़िगर करें:

tsconfig.json

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

tailwind.config.js कॉन्फ़िगर करें

const { fontFamily } = require("tailwindcss/defaultTheme")

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: `var(--radius)`,
        md: `calc(var(--radius) - 2px)`,
        sm: "calc(var(--radius) - 4px)",
      },
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

ग्लोबल्स.सीएसएस फ़ाइल को निम्नलिखित के साथ अपडेट करें:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;

    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;

    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;

    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;

    --border: 216 34% 17%;
    --input: 216 34% 17%;

    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;

    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;

    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;

    --ring: 216 34% 17%;

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

अंत में अपने lib/utils.ts में cn हेल्पर जोड़ें

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

फिर बस यहां से वांछित घटक स्थापित करें और प्रत्येक घटक के लिए निर्देशों का पालन करें।

बस इतना ही, मैं अब अपने लगभग सभी वेब प्रोजेक्ट्स में shadcn का उपयोग करता हूं, यह बहुत लोकप्रिय हो गया है क्योंकि इसका उपयोग करना और अनुकूलित करना बहुत आसान है, देखें कि मैंने चयन और स्क्रॉलरिया घटक से एक कस्टम shadcn-date-picker घटक कैसे बनाया यहाँ।

अगर आपको इस लाइब्रेरी को अपने प्रोजेक्ट में जोड़ने में कोई समस्या आ रही है तो मुझे बताएं।

आइए x.com पर जुड़ें