2 मिनट में Radix UI और ShadCN UI को समझें: अपने React इंटरफेस को बढ़ावा दें!

नमस्ते, React इंटरफेस निर्माता! 🎨 आज, हम Radix UI और ShadCN UI के बारे में जानेंगे - दो महत्वपूर्ण लाइब्रेरीज जो आधुनिक, सुलभ और स्टाइलिश UI कंपोनेंट्स को पहिया फिर से ईजाद किए बिना बनाने में मदद करती हैं। यह ब्लॉग वास्तव में Next.js 15, TypeScript, डेटा वैलिडेशन के लिए Zod, और इंटरफेस कंपोनेंट्स के लिए ShadCN UI के साथ बनाया गया है। एक्सप्लोर करने के लिए तैयार हैं?

Radix UI: डिफ़ॉल्ट रूप से सुलभ कंपोनेंट्स 🎯

Radix UI एक React कंपोनेंट लाइब्रेरी है जो एक्सेसिबिलिटी और परफॉरमेंस पर जोर देती है। प्रत्येक कंपोनेंट Server-Side Rendering (SSR) के लिए ऑप्टिमाइज़ किया गया है और ARIA मानकों का पालन करता है, जो इसे पेशेवर एप्लिकेशन के लिए एक आदर्श विकल्प बनाता है। 🚀

Radix UI को क्यों चुनें?

• ♿️ बिल्ट-इन WCAG 2.1 एक्सेसिबिलिटी
• 🎯 कोई CSS डिपेंडेंसी नहीं
• 🔄 पूर्ण SSR सपोर्ट
• ⌨️ कीबोर्ड नेविगेशन
• 📱 नेटिव टच सपोर्ट
• 🎨 फ्लेक्सिबल स्टाइलिंग API

Radix UI को इंस्टॉल करना

Radix UI के साथ शुरू करने के लिए, आपको जिन कंपोनेंट्स की जरूरत है उन्हें इंस्टॉल करें:

bash
1# एक विशिष्ट कंपोनेंट इंस्टॉल करना
2npm install @radix-ui/react-dialog
3
4# या कई कंपोनेंट्स इंस्टॉल करना
5npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-tooltip

उपयोग का उदाहरण: एक सुलभ डायलॉग

यहाँ एक Dialog का उदाहरण है जिसमें फोकस प्रबंधन और कीबोर्ड इवेंट्स हैं:

typescript
1import * as Dialog from '@radix-ui/react-dialog';
2import { useCallback } from 'react';
3
4export default function MyDialog() {
5  const handleOpenChange = useCallback((open: boolean) => {
6    console.log('Dialog state:', open);
7  }, []);
8
9  return (
10    <Dialog.Root onOpenChange={handleOpenChange}>
11      <Dialog.Trigger asChild>
12        <button className="button-primary">डायलॉग खोलें</button>
13      </Dialog.Trigger>
14
15      <Dialog.Portal>
16        <Dialog.Overlay className="fixed inset-0 bg-black/50 animate-fade-in" />
17        <Dialog.Content className="dialog-content">
18          <Dialog.Title className="text-xl font-bold">
19            स्वागत है 👋
20          </Dialog.Title>
21          <Dialog.Description className="mt-2">
22            यह डायलॉग पूरी तरह से सुलभ है: Tab,
23            Escape, या स्क्रीन रीडर्स का उपयोग करके देखें!
24          </Dialog.Description>
25
26          <Dialog.Close asChild>
27            <button className="button-secondary mt-4">
28              बंद करें
29            </button>
30          </Dialog.Close>
31        </Dialog.Content>
32      </Dialog.Portal>
33    </Dialog.Root>
34  );
35}

ShadCN UI: स्टाइल और बेस्ट प्रैक्टिसेस के साथ Radix UI 🌈

ShadCN UI केवल स्टाइल किए गए कंपोनेंट्स का संग्रह नहीं है: यह एक पूर्ण टूलकिट है जो Radix UI, Tailwind CSS, और React डेवलपमेंट बेस्ट प्रैक्टिसेस को जोड़ती है। इसमें शामिल है:

• 🎨 डार्क/लाइट थीम्स
• 🔄 स्मूथ एनिमेशन
• 📱 रेस्पॉन्सिव डिज़ाइन
• 🎯 कंपोनेंट वेरिएंट्स
• ⚡️ ऑप्टिमाइज्ड परफॉरमेंस

ShadCN UI को इंस्टॉल करना

bash
1# प्रारंभिक इंस्टॉलेशन
2npx shadcn@latest init
3
4# विशिष्ट कंपोनेंट्स जोड़ना
5npx shadcn@latest add button
6npx shadcn@latest add dialog

TypeScript के साथ ShadCN UI का कंपोनेंट उदाहरण

typescript
1import { Button } from '@/components/ui/button';
2import { useState } from 'react';
3
4interface Props {
5  variant?: 'default' | 'destructive' | 'outline' | 'ghost';
6  children: React.ReactNode;
7}
8
9export default function MyButton({ variant = 'default', children }: Props) {
10  const [loading, setLoading] = useState(false);
11
12  return (
13    <Button
14      variant={variant}
15      disabled={loading}
16      onClick={() => setLoading(true)}
17      className="transition-all hover:scale-105"
18    >
19      {loading ? 'लोड हो रहा है...' : children}
20    </Button>
21  );
22}

थीम कॉन्फिगरेशन

ShadCN UI उन्नत थीम कस्टमाइजेशन की अनुमति देता है:

typescript
1// tailwind.config.ts
2import { Config } from 'tailwindcss';
3
4export default {
5  darkMode: ['class'],
6  theme: {
7    extend: {
8      colors: {
9        primary: {
10          DEFAULT: 'hsl(var(--primary))',
11          foreground: 'hsl(var(--primary-foreground))',
12        },
13        // अपने कस्टम रंग जोड़ें
14      },
15      keyframes: {
16        'fade-in': {
17          '0%': { opacity: '0' },
18          '100%': { opacity: '1' },
19        },
20      },
21      animation: {
22        'fade-in': 'fade-in 0.2s ease-out',
23      },
24    },
25  },
26} satisfies Config;

इस स्टैक को क्यों चुनें? 🧐

1. अधिकतम उत्पादकता

   • उपयोग के लिए तैयार कंपोनेंट्स
   • बिल्ट-इन TypeScript
   • उत्कृष्ट DX (डेवलपर एक्सपीरियंस)

2. इष्टतम प्रदर्शन

   • न्यूनतम बंडल साइज
   • सर्वर-साइड रेंडरिंग
   • प्रोग्रेसिव हाइड्रेशन

3. रखरखाव योग्यता

   • सुलभ सोर्स कोड
   • आसान कस्टमाइजेशन
   • सक्रिय समुदाय

4. एक्सेसिबिलिटी

   • डिफ़ॉल्ट रूप से WCAG 2.1
   • सहायक टेस्टिंग
   • पूर्ण डॉक्यूमेंटेशन

आपके प्रोजेक्ट के लिए बेस्ट प्रैक्टिसेस 🚀

1. कंपोनेंट संगठन

typescript
1// डोमेन के अनुसार अपने कंपोनेंट्स को संगठित करें
2src/
3  components/
4    ui/          // ShadCN UI कंपोनेंट्स
5    layout/      // लेआउट
6    forms/       // फॉर्म कंपोनेंट्स
7    features/    // फीचर-स्पेसिफिक कंपोनेंट्स

2. React Hook Form और Zod के साथ उपयोग

typescript
1import { z } from 'zod';
2import { useForm } from 'react-hook-form';
3import { zodResolver } from '@hookform/resolvers/zod';
4
5const schema = z.object({
6  email: z.string().email(),
7  password: z.string().min(8),
8});
9
10type FormData = z.infer<typeof schema>;

सारांश 📝

दो मिनट में, हमने जाना:

• सुलभ और कार्यकुशल React कंपोनेंट्स के लिए Radix UI
• पूर्ण Tailwind-आधारित डिज़ाइन सिस्टम के लिए ShadCN UI
• संगठन और उपयोग के लिए बेस्ट प्रैक्टिसेस
• TypeScript और Zod के साथ एकीकरण

इन टूल्स का संयोजन आपको आधुनिक, सुलभ और रखरखाव योग्य इंटरफेस बनाने की अनुमति देता है, जबकि एक उत्कृष्ट डेवलपमेंट अनुभव बनाए रखता है! 🎉

---

Radix UI और ShadCN UI को जानने के लिए समय निकालने के लिए धन्यवाद। अधिक जानकारी के लिए आधिकारिक Radix UI दस्तावेज़ और ShadCN UI के दस्तावेज़ देखने में संकोच न करें! जल्द ही React की अधिक बेस्ट प्रैक्टिसेस के साथ मिलते हैं!