इस प्रोजेक्ट के बारे में

Sketchbook UI एक React घटक लाइब्रेरी है जो हैंड-ड्रॉन अंदाज़ में डिज़ाइन की गई है, जो साइड प्रोजेक्ट्स और लैंडिंग पेज़ के लिए उपयुक्त है जहाँ नोटबुक जैसा स्केची लुक चाहिए। यह क्या देता है - 20 घटक, TypeScript में लिखे गए, निर्यातित prop इंटरफ़ेस के साथ। - फॉर्म कंट्रोल्स: Button, Input, Textarea, Checkbox, Switch, Select, RadioGroup, Slider। - डेटा प्रदर्शन: Badge, Avatar, Card, Divider, Progress, Skeleton (SkeletonText और SkeletonCard सहित), Spinner, Tooltip। - फीडबैक: Toast (ToastContainer और useToast hook के साथ) और Modal। - नेविगेशन: Dropdown और Accordion (AccordionItem के साथ)। दृश्य दृष्टिकोण यह लुक स्टॉक डिज़ाइन-टोकन सेट के बजाय हैंड-ड्रॉन SVG बॉर्डर, पेपर टेक्सचर और सूक्ष्म एनिमेशन से आता है। घटक कस्टमाइज़ेशन के लिए `colors` और `typography` props expos करते हैं, ताकि बटन को उसका अपना बैकग्राउंड, स्ट्रोक, टेक्स्ट रंग, फ़ॉन्ट साइज़ और फ़ॉन्ट फ़ैमिली दिया जा सके (README का उदाहरण Caveat जैसी क्रूसिव फ़ॉन्ट का उपयोग करता है)। एक `SketchProvider` ऐप को रैप करता है ताकि साझा स्टाइलिंग संदर्भ प्रदान किया जा सके। स्थापना और सेटअप npm, yarn या pnpm (`npm install sketchbook-ui`) से इंस्टॉल करें, react और react-dom peer dependencieज़ हैं। README मुख्य एंट्री फ़ाइल में stylesheet को एक बार import करने का निर्देश देता है: `import "sketchbook-ui/style.css";` फिर पैकेज से घटक import करें और उन्हें `SketchProvider` के अंदर रखें। चूँकि stylesheet import एक अलग चरण है, इसे भूल जाना पहली बार चलाने में संभावित गलती है। बंडल और रनटाइम नोट्स README कहता है कि लाइब्रेरी का React के अलावा कोई runtime dependency नहीं है, tree-shaking सपोर्ट के साथ बनाया गया है ताकि केवल import किए गए घटक बंडल में आएँ, और यह 70 kB gzipped से कम है। tree-shaking को एक single component के named import के साथ दिखाया गया है। ये प्रोजेक्ट के अपने दावे हैं; इन पर भरोसा करने से पहले अपने बंडलर और संस्करण के खिलाफ सत्यापित करें। दस्तावेज़ीकरण और लाइसेंस सभी घटक और वेरिएंट एक होस्ट किए गए Storybook में देखे जा सकते हैं। CONTRIBUTING.md में योगदान निर्देश हैं, और प्रोजेक्ट MIT लाइसेंस के तहत जारी किया गया है। अच्छा फिट / कम अच्छा फिट यह एक अच्छा फिट है यदि आप प्रोटोटाइप, व्यक्तिगत साइट या खेल-प्रवृत्ति वाले उत्पाद के लिए एक अलग हैं-स्केच्ड इंटरफ़ेस चाहते हैं, और आप पहले से ही React और TypeScript में काम कर रहे हैं। यह डेटा-सघन dashboards, भारी डेटा टेबल्स, या ऐसे टीमों के लिए कम अच्छा फिट है जिनको बड़ी, accessibility-audited, दीर्घकालिक घटक सेट चाहिए — README accessibility परीक्षण, per-component props से परे theming, या mainstream design systems के तुलनीय घटक विस्तार का वर्णन नहीं करता है।