वर्तमान में बहुत सारे सीएसएस फ्रेमवर्क हैं जैसे बूटस्ट्रैप, बुलमा, सिमेंटिक यूआई आदि। जो डिस्प्ले (यूजर इंटरफ़ेस) के निर्माण को गति दे सकता है। वर्तमान में चलन में आने वाले CSS टूल में से एक Shadcn/ui है, यह पहले क्या था?

आधिकारिक वेबसाइट पर Shadcn/ui बताता है

“पुन: प्रयोज्य घटकों का एक संग्रह जिसे हम कॉपी करके अपने ऐप्स में पेस्ट कर सकते हैं।”

इसलिए shadcn/ui दृश्यों में पुन: प्रयोज्य घटकों का एक संग्रह है, जिसे TailwindCSS और RadixUI का उपयोग करके बनाया गया है। वर्तमान में यह Next.js, Laravel इत्यादि जैसे कई फ्रेमवर्क का समर्थन करता है। आधिकारिक वेबसाइट Shadcn/ui पर देखा जा सकता है।

समर्थित कई रूपरेखाओं में से। हमारा मुख्य लक्ष्य यह है कि लारवेल ब्रीज़ का उपयोग करके लारवेल रिएक्ट पर Shadcn/ui कैसे स्थापित किया जाए।

पहला चरण: लार्वा प्रोजेक्ट स्थापित करें।

laravel new laravel-shadcn

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

अपनी परियोजना की आवश्यकताओं के अनुसार भरें। यदि हां, तो इंस्टॉलेशन पूरा होने तक प्रतीक्षा करें। इंस्टॉलेशन की गति आपके इंटरनेट कनेक्शन पर निर्भर करती है।

लारवेल प्रोजेक्ट इंस्टॉलेशन पूरा हो गया है। ठीक है जारी रखें!

दूसरा चरण: लारवेल परियोजना पर Shadcn/ui स्थापित करना

अभी भी उसी टर्मिनल में हैं। सबसे पहले नीचे कमांड टाइप करें:

cd laravel-shadcn
npx shadcn-ui@latest init

यदि ऐसा है, तो एक अनुरोध प्रकट होगा और इसे आपकी आवश्यकताओं के अनुसार भरें। निम्नलिखित उदाहरण के रूप में।

Would you like to use TypeScript (recommended)? no 
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › resources/css/app.css
Do you want to use CSS variables for colors? › yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/Components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no

यदि आप एक टाइपस्क्रिप्ट उपयोगकर्ता हैं तो आप हाँ, ठीक, अगला चुन सकते हैं। vscode पर जाएं या अपने पसंदीदा कोड संपादक के अनुसार। यहां मैं vscode का उपयोग करता हूं, फिर बस निम्नलिखित कमांड का उपयोग करें

cd laravel-shadcn

code .

स्वचालित रूप से vscode खोलता है और आपका लार्वा प्रोजेक्ट खोलता है। यदि ऐसा है, तो अगला कदम यह सुनिश्चित करने के लिए कि हमारे लारवेल प्रोजेक्ट में shadcnui सफलतापूर्वक स्थापित हो गया है, resource/css/app.css फ़ोल्डर में app.css फ़ाइल को खोलना है।

उपरोक्त चित्र में shadcn को हमारे लारवेल प्रोजेक्ट पर सफलतापूर्वक स्थापित किया गया है।

स्पष्टीकरण :

• Shadcn स्वचालित रूप से app.css फ़ाइल को अपडेट कर देगा
• जब हमें बटन, अलर्ट, टेबल इत्यादि जैसे घटकों की आवश्यकता होती है। फिर हमें इसे आपके लारवेल प्रोजेक्ट के रूट टर्मिनल के माध्यम से इंस्टॉल करना होगा। (इंटरनेट कनेक्शन की आवश्यकता है)
• आपके लिए आवश्यक सभी घटक आधिकारिक ShadcnUI वेबसाइट पर देखे जा सकते हैं
• जब आप घटकों को स्थापित करना समाप्त कर लेंगे, तो हम स्वचालित रूप से resource/js/Components/ui/Button.jsx फ़ोल्डर में एक नई फ़ाइल उत्पन्न करेंगे। हम इस फ़ाइल को अपनी इच्छा के अनुसार संशोधित भी कर सकते हैं।

चरण तीन: सुनिश्चित करें कि Shadcn स्थापित है
यह सुनिश्चित करने के लिए कि ShadcnUI स्थापित हो गया है हम टर्मिनल में एक कमांड दे सकते हैं। अर्थात्, उदाहरण के लिए, हम बटन घटक स्थापित करेंगे, कमांड है: npx shadcn-ui@latest ऐड बटन नीचे की छवि में देखा जा सकता है

फिर वेलकम.जेएसएक्स फ़ाइल खोलें और नीचे दी गई छवि के अनुसार अनुसरण करें।

यदि यह पहले से ही है। एक ही निर्देशिका के साथ दो टर्मिनल खोलें अर्थात् laravel-shadcn

टर्मिनल 1

npm run dev

टर्मिनल 2

php artisan serve

फिर इसे ब्राउज़र में खोलें और बटन घटक दिखाई देगा जो डिफ़ॉल्ट गहरे रंग का है।