स्टाइल और थीमिंग

ब्लॉक सिर्फ़ shadcn थीम टोकन (--primary, --card, --radius …) इस्तेमाल करते हैं, इसलिए कोई भी shadcn थीम चलती है, tweakcn या shadcn थीम एडिटर से बनी थीम भी।

Theme Studio

Theme Studio से ब्राउज़र में ही थीम बनाएँ: कलर प्रीसेट, फ़ॉन्ट पेयरिंग, रेडियस, शैडो और डेंसिटी चुनें, किसी भी स्टाइल पैक में लाइव डैशबोर्ड पर प्रीव्यू देखें, फिर globals.css और next/font वाला layout.tsx कॉपी करें। लिंक में हर सेटिंग सहेजी रहती है, इसलिए थीम शेयर करना आसान है।

स्टाइल पैक

Pro में 12 स्टाइल पैक शामिल हैं। हर पैक <html> पर एक एट्रिब्यूट से हर ब्लॉक, Core कंपोनेंट और आपके अपने shadcn कंपोनेंट का रूप बदल देता है। goodui Native में वही 12 लुक उसके ThemeProvider पर मिलते हैं (look="luxe"):

Clean: डिफ़ॉल्ट shadcn/ui। शांत और जाना-पहचाना।
Neobrutal: मोटे बॉर्डर, सख़्त शैडो, तेज़ रंग।
Glass: नरम ऑरोरा पर फ़्रॉस्टेड पैनल।
Retro 98: बेवल, टाइटल बार और टील डेस्कटॉप।
8-bit: पिक्सेल बॉर्डर और आर्केड टाइप।
Terminal: काले पर हरा फ़ॉस्फ़र, स्कैनलाइन चालू।
Editorial: सेरिफ़ शीर्षक, हेयरलाइन, गर्म काग़ज़ और ऑक्सब्लड।
Soft: क्ले सतहें, बड़ा रेडियस, बॉर्डर की जगह शैडो।
Neon: गहरा नेवी, सियान और मजेंटा ग्लो, हल्की ग्रिड।
Paper: स्याही की लकीरें, स्टैम्प बैज और स्टॉक पर मोनो लेबल।
Swiss: सफ़ेद, काला, एक लाल। फ़्लैट, चौकोर, सघन।
Luxe: लगभग काला, सेरिफ़ शीर्षक और सुनहरी हेयरलाइन।

app/layout.tsx

<html lang="en" data-style="retro98">

डार्क मोड shadcn की तरह ही काम करता है: <html> पर dark क्लास जोड़ें। हर स्टाइल का डार्क वेरिएंट है।

रिड्यूस्ड मोशन

टर्मिनल स्कैनलाइन जैसे एनिमेटेड इफ़ेक्ट तब बंद हो जाते हैं जब यूज़र ने prefers-reduced-motion सेट किया हो।

इंस्टॉलेशन साउंड और हैप्टिक्स