UI प्रिमिटिव्स — एक फ़ील्ड गाइड

अगर आपने कभी किसी आधुनिक ऐप को देखकर सोचा है “वो चीज़ जो दिख रही है, उसे कहते क्या हैं?” — तो यह पेज आपके लिए है।

आप जो भी इंटरफ़ेस इस्तेमाल करते हैं, वह आश्चर्यजनक रूप से कम संख्या में पुन: उपयोग योग्य बिल्डिंग ब्लॉक्स से बना होता है जिन्हें UI प्रिमिटिव्स कहा जाता है। इनके नाम होते हैं। कभी-कभी अजीब नाम। लेकिन एक बार जब आप रूपक (metaphor) समझ जाते हैं, तो फिर अनदेखा नहीं कर सकते।

En Parlant~ Mantine का उपयोग करता है, जो एक React कंपोनेंट लाइब्रेरी है और ये सभी चीज़ें रेडीमेड प्रदान करती है। यह रहा आपका फ़ील्ड गाइड।

जो फ़र्नीचर जैसे लगते हैं

Toast

एक toast एक छोटी सूचना होती है जो स्क्रीन के किनारे से उभरती है, कुछ सेकंड रुकती है, और फिर खिसककर गायब हो जाती है। जैसे टोस्टर से ब्रेड का टुकड़ा बाहर निकलता है — बस गुरुत्वाकर्षण उल्टा काम करता है और वह अंततः वापस अंदर चला जाता है।

En Parlant~ में, toasts निचले-दाएँ कोने में दिखाई देते हैं (Mantine के @mantine/notifications के ज़रिए) इस तरह की चीज़ों के लिए:

“Database loaded successfully” — पॉप
“TTS voice not configured” — पॉप
“Failed to connect to Lichess” — पॉप, और आपको थोड़ी उदासी होती है

आपने इन्हें बुलाया नहीं। ये बस आ जाते हैं, अपना संदेश देते हैं, और चले जाते हैं। ये UI दुनिया के कबूतर-डाकिए हैं।

Card

एक card एक आयताकार कंटेनर होता है जिसमें बॉर्डर या शैडो होती है और जो संबंधित सामग्री को एक साथ समूहित करता है। कल्पना कीजिए एक इंडेक्स कार्ड डेस्क पर रखा है — इसकी एक निश्चित सीमा है, यह एक चीज़ रखता है, और आप इसे उठाकर हिला सकते हैं।

En Parlant~ में, आपको कार्ड्स दिखेंगे:

गेम प्रीव्यू डेटाबेस ब्राउज़र में (GameCard) — खिलाड़ियों के नाम, परिणाम, तारीख
बोर्ड पोज़िशन एडिटर (EditingCard) — वह कार्ड जो आप कस्टम पोज़िशन सेट करते समय पलटते हैं
डेटाबेस एंट्रीज़ डेटाबेस पेज पर — हर डेटाबेस को ग्रिड में अपना कार्ड मिलता है

कार्ड्स का एक करीबी रिश्तेदार Paper है, जो मूलतः एक कार्ड है जो आर्ट स्कूल गया हो। वही अवधारणा — बॉर्डर या शैडो वाला कंटेनर — लेकिन कम सिमैंटिक अर्थ के साथ। Paper बस कहता है “मैं एक सतह हूँ।” यह एनालिसिस पैनल और डेटाबेस जानकारी डिस्प्ले के पीछे बैकड्रॉप के रूप में दिखता है।

Drawer / Sheet

वर्तमान में En Parlant~ में उपयोग नहीं होता, लेकिन जानने योग्य है: एक drawer एक पैनल होता है जो स्क्रीन के किनारे से खिसककर अंदर आता है, जैसे डेस्क का दराज़। (बस। यही पूरा रूपक है। UI डिज़ाइनर उस दिन बहुत शाब्दिक मूड में थे।)

जो आपका रास्ता रोकते हैं

एक modal एक पॉपअप डायलॉग होता है जो आपका ध्यान माँगता है। यह पृष्ठभूमि को धूसर कर देता है और आपको कुछ और करने से पहले इससे निपटने पर मजबूर करता है। यह UI पैटर्न का ज़िद्दी बच्चा है — “अभी मुझे देखो!”

En Parlant~ उन पलों के लिए modals का उपयोग करता है जहाँ वाकई आपके ध्यान की ज़रूरत होती है:

“क्या आप वाकई सारा डेटा मिटाना चाहते हैं?” (ClearDataModal) — चेकबॉक्स के साथ ताकि आप चुन सकें कौन सा डेटा नष्ट करना है
“एक अपडेट उपलब्ध है” (UpdateModal) — डाउनलोड के दौरान प्रोग्रेस बार के साथ
“एक गेम इम्पोर्ट करें” (ImportModal) — PGN पेस्ट करें, FEN दर्ज करें, या लिंक डालें
“एक नया रेपर्टोइर बनाएँ” (CreateRepertoireModal) — नाम दें, कॉन्फ़िगर करें, शुरू करें
“En Parlant~ के बारे में” (About) — वर्शन जानकारी, क्रेडिट्स, सामान्य बैकस्टेज पास

Modals कहते हैं: “यह एक बातचीत है। और हम इसे अभी कर रहे हैं।“

Dialog

एक dialog modal का शिष्ट चचेरा भाई है। Mantine में, ये मूलतः एक ही कंपोनेंट हैं, लेकिन UI डिज़ाइन सिद्धांत में, dialog छोटा और अधिक केंद्रित होता है — एक सवाल और जवाब। “बदलाव सेव करें?” हाँ / नहीं। बस।

En Parlant~ इन तेज़ हाँ-या-नहीं पलों के लिए ConfirmModal का उपयोग करता है, जैसे यह पुष्टि करना कि आप बिना सेव किए बदलाव छोड़ना चाहते हैं।

जो आते-जाते रहते हैं

एक tooltip एक छोटा लेबल होता है जो तब दिखता है जब आप किसी चीज़ पर होवर करते हैं। यह वह मददगार अजनबी है जो आपको उलझा हुआ देखकर धीरे से जवाब फुसफुसाता है।

En Parlant~ में tooltips हर जगह हैं। लगभग किसी भी आइकन बटन पर होवर करें और आपको एक मिलेगा:

↻ बटन पर होवर करें → “Reload”
किसी कटे हुए फ़ाइल पथ पर होवर करें → पूरा पथ दिखता है
किसी एनोटेशन सिंबल पर होवर करें → उस सिंबल का अर्थ
एनालिसिस पैनल में किसी चाल पर होवर करें → एक लघु बोर्ड प्रीव्यू दिखता है

Tooltips मूल “मैनुअल की ज़रूरत नहीं” हैं।

एक popover एक tooltip है जिसने स्नातकोत्तर की पढ़ाई की हो। सिर्फ़ टेक्स्ट लेबल दिखाने के बजाय, इसमें कुछ भी हो सकता है — बटन, इमेज, यहाँ तक कि एक छोटी शतरंज बिसात।

En Parlant~ में, जब आप इंजन एनालिसिस में किसी चाल पर होवर करते हैं, तो एक popover उस स्थिति पर बोर्ड का प्रीव्यू रेंडर करता है। यह एक tooltip है, बस यह विज़ुअल एड्स साथ लाया है।

एक menu क्रियाओं की एक सूची होती है जो तब दिखती है जब आप किसी चीज़ पर क्लिक (या राइट-क्लिक) करते हैं। आप इन्हें कंप्यूटिंग की शुरुआत से इस्तेमाल कर रहे हैं — File, Edit, View। आप जानते हैं।

En Parlant~ में दो प्रकार हैं:

टॉप बार मेन्यू — क्लासिक File / Edit / View मेन्यू बार, Mantine के Menu कंपोनेंट से बना। दाईं ओर कीबोर्ड शॉर्टकट सूचीबद्ध। एक डिज़ाइन पैटर्न इतना पुराना कि इसकी पेंशन लगती है।
कॉन्टेक्स्ट मेन्यू — गेम ट्री में किसी चाल पर राइट-क्लिक करें और आपको Promote Variation, Delete from Here, और Copy Line जैसे विकल्प मिलते हैं। ये अतिरिक्त पॉलिश के लिए mantine-contextmenu लाइब्रेरी का उपयोग करते हैं।

मेन्यू की अपनी उप-शब्दावली होती है: Menu.Target (जिस पर आप क्लिक करते हैं), Menu.Dropdown (जो सूची दिखती है), Menu.Item (प्रत्येक विकल्प), और Menu.Divider (वह पतली रेखा जो कहती है “अब अलग सेक्शन है”)।

जो जगह व्यवस्थित करते हैं

Stack और Group

ये लेआउट के ब्रेड-बटर हैं।

Stack चीज़ों को लंबवत व्यवस्थित करता है — एक के ऊपर एक। जैसे किताबें ढेर करना।
Group चीज़ों को क्षैतिज व्यवस्थित करता है — बगल-बगल। जैसे शेल्फ पर शतरंज के मोहरे एक पंक्ति में रखना।

ये सचमुच प्रत्येक 100+ फ़ाइलों में दिखते हैं। ये पूरे ऐप में सबसे आम कंपोनेंट हैं। जब भी चीज़ें सुव्यवस्थित दिखती हैं, एक Stack या Group ज़िम्मेदार होता है।

Flex

Flex Stack और Group का स्विस आर्मी नाइफ़ चचेरा भाई है। जब चीज़ों को wrap करना, खींचना, सिकोड़ना, उल्टा करना, या किसी भी तरह से अनियमित व्यवहार करना हो, तो Flex CSS Flexbox मॉडल पर पूर्ण नियंत्रण के साथ सामने आता है।

एनालिसिस पैनल की मूव लिस्ट में उपयोग होता है — चालों की वे श्रृंखलाएँ जो टेक्स्ट की तरह wrap और flow होती हैं? वह Flex का काम है।

Box

एक Box एक <div> है जिसने टॉप हैट पहनी हुई है। अपने आप में कुछ नहीं करता — बस एक जेनेरिक कंटेनर है। लेकिन यह Mantine की स्टाइलिंग props स्वीकार करता है, जो इसे “मुझे इस चीज़ के चारों ओर एक चीज़ चाहिए” के लिए अविश्वसनीय रूप से उपयोगी रैपर बनाता है।

Box 150+ फ़ाइलों में दिखता है। यह कंपोनेंट लाइब्रेरी का डक्ट टेप है।

Center

ठीक वही करता है जो नाम कहता है। किसी चीज़ को बीच में रखता है। क्षैतिज रूप से। लंबवत रूप से। दोनों। बस।

खाली अवस्थाओं में दिखता है — जब कोई अकाउंट लिंक नहीं है, कोई डेटाबेस लोड नहीं है, अभी कोई डेटा नहीं है। एक बड़ा आइकन, एक संदेश, और Center यह सुनिश्चित कर रहा है कि सब बिल्कुल सही जगह पर है। किसी को भी बीच से हटी हुई खाली अवस्था पसंद नहीं।

SimpleGrid

एक grid जो सरल है। आप इसे बताते हैं कितने कॉलम चाहिए और यह आपके कार्ड्स को एक साफ़ ग्रिड में व्यवस्थित करता है जो विंडो रीसाइज़ होने पर पुनर्व्यवस्थित होता है। डेटाबेस पेज इसका उपयोग डेटाबेस कार्ड्स को रिस्पॉन्सिव ग्रिड में लगाने के लिए करता है।

ScrollArea

एक कंटेनर जो तब स्क्रॉल होता है जब इसकी सामग्री ओवरफ़्लो होती है। आप सोचेंगे यह मुफ़्त में मिलता होगा — और CSS overflow: auto से कुछ हद तक मिलता भी है — लेकिन ScrollArea स्टाइल्ड स्क्रॉलबार, मोमेंटम स्क्रॉलिंग, और ओवरफ़्लो डिटेक्शन जोड़ता है। यह गेम ट्री पैनल, एनालिसिस लाइन्स, और कहीं भी जहाँ सामग्री अपने बॉक्स से ऊँची हो सकती है, उसे wrap करता है।

AppShell

AppShell मास्टर लेआउट है — पूरे एप्लिकेशन का कंकाल। यह तय करता है कि हेडर कहाँ जाता है, साइडबार कहाँ जाता है, और मुख्य सामग्री कहाँ रहती है। बाकी सब कुछ इसके अंदर बसता है।

आप इसे सिर्फ़ एक बार उपयोग करते हैं। यह घर की नींव है।

Portal

एक Portal एक जादुई वर्महोल है। यह किसी कंपोनेंट को DOM ट्री में उसकी सामान्य स्थिति से बाहर रेंडर करता है और कहीं और रख देता है — आमतौर पर दस्तावेज़ के रूट पर। इसी तरह popovers और बोर्ड प्रीव्यू overflow: hidden वाले पैरेंट कंटेनर्स द्वारा कटने से बचते हैं।

आप कभी Portal को नहीं देखते। आप सिर्फ़ इसके प्रभाव देखते हैं। यह UI कंपोनेंट्स का बैकस्टेज क्रू है।

जिनसे आप इंटरैक्ट करते हैं

Button

टेक्स्ट वाला एक क्लिक करने योग्य आयत। आप इसे जानते हैं। Mantine में, बटन variants में आते हैं:

filled — ठोस रंग, उच्च प्रधानता। “मुझ पर क्लिक करो, मैं ज़रूरी हूँ।”
outline — बस एक बॉर्डर। “मैं एक विकल्प हूँ, पर कोई दबाव नहीं।”
subtle — मुश्किल से दिखता है। “ज़रूरत हो तो मैं यहाँ हूँ।”
default — एक तटस्थ बीच का रास्ता।

En Parlant~ इन सभी का 150+ फ़ाइलों में उपयोग करता है। सबसे आम पैटर्न: एक modal के नीचे बटनों का एक Group — “Cancel” (subtle) और “Confirm” (filled)। क्लासिक।

ActionIcon

एक ActionIcon एक बटन है जिसने अपना टेक्स्ट लेबल छोड़ दिया और पूरी तरह आइकन जीवनशैली अपना ली। यह कॉम्पैक्ट, वर्गाकार है, और अपने आइकन (प्लस एक tooltip) पर निर्भर करता है अपना उद्देश्य बताने के लिए।

टूलबार बटन, पैनल कंट्रोल्स, क्लोज़ बटन — सब ActionIcons हैं। ये किसी क्रिया की पेशकश करने का सबसे स्पेस-एफ़िशिएंट तरीका हैं।

Switch

एक Switch एक टॉगल है जो एक छोटे लाइट स्विच जैसा दिखता है। बाएँ पलटो, दाएँ पलटो। ऑन। ऑफ़।

सेटिंग्स में, switches बाइनरी विकल्पों को नियंत्रित करते हैं:

ध्वनि ऑन/ऑफ़
TTS नैरेशन सक्षम/अक्षम
डार्क मोड / लाइट मोड

भौतिक रूपक इतना अच्छा है कि आपके दादा-दादी भी इसे समझ जाएँगे।

Slider

एक Slider एक ट्रैक है जिसमें एक हैंडल होता है जिसे आप आगे-पीछे खींचकर एक मान चुनते हैं। जैसे एक वॉल्यूम नॉब जो चपटा हो गया हो।

En Parlant~ sliders का उपयोग करता है:

फ़ॉन्ट साइज़ — एडजस्ट करने के लिए खींचें
वॉल्यूम — एडजस्ट करने के लिए खींचें (ज़ाहिर है)
CPU कोर — इंजन को कितने कोर इस्तेमाल करने चाहिए?
हैश मेमोरी — इंजन की हैश टेबल के लिए कितनी RAM?

एक RangeSlider भी है जिसमें दो हैंडल होते हैं एक रेंज चुनने के लिए — Elo रेटिंग के अनुसार गेम्स फ़िल्टर करने (उदा., 2000–2200) और समय अवधियों के लिए उपयोग होता है।

SegmentedControl

बटनों की एक पंक्ति जहाँ एक समय में ठीक एक चयनित होता है। यह कार रेडियो प्रीसेट जैसा है — एक दबाओ, बाकी बाहर निकल जाते हैं।

इनके बीच टॉगल करने के लिए उपयोग होता है:

एनालिसिस चार्ट पर सेंटीपॉन मूल्यांकन बनाम जीत/ड्रॉ/हार प्रतिशत
अलग-अलग मूव नोटेशन प्रारूप
इंजन लाइन काउंट

Checkbox और Select

आप इन्हें जानते हैं। Checkboxes “जो भी लागू हो चुनें” के लिए, Select ड्रॉपडाउन “इस सूची में से एक चुनें” के लिए। ये सेटिंग्स, फ़िल्टर्स, और पूरे ऐप में फ़ॉर्म्स में दिखते हैं। Clear Data modal में विशेष रूप से संतोषजनक चेकबॉक्स का सेट है जहाँ आप अपना विनाश स्वयं चुन सकते हैं।

Autocomplete

एक टेक्स्ट इनपुट जो टाइप करते समय सुझाव देता है। डेटाबेस ब्राउज़र में खिलाड़ी खोज इसका उपयोग करती है — नाम टाइप करना शुरू करें और मेल खाने वाले खिलाड़ी नीचे दिखते हैं।

FileInput और DateInput

FileInput क्लिक करने पर फ़ाइल पिकर खोलता है — PGN फ़ाइलें लोड करने के लिए इम्पोर्ट modal में उपयोग होता है। DateInput तारीख चुनने के लिए एक कैलेंडर खोलता है — तारीख के अनुसार गेम्स फ़िल्टर करने के लिए उपयोग होता है। इसके अलावा MonthPickerInput और YearPickerInput भी हैं जब कम सटीकता चाहिए (Lichess डेटाबेस महीने के अनुसार फ़िल्टरिंग, Masters डेटाबेस साल के अनुसार फ़िल्टरिंग)।

जो प्रगति दिखाते हैं

Progress Bar

एक क्षैतिज बार जो बाएँ से दाएँ भरता है यह दिखाने के लिए कि काम कितना आगे बढ़ा है। ऐप अपडेट (डाउनलोड प्रगति) के दौरान उपयोग होता है और — अधिक रचनात्मक तरीके से — एनालिसिस पैनल में जीत/ड्रॉ/हार संभावनाएँ दिखाने के लिए। तीन रंगीन सेक्शन (सफ़ेद, भूरा, काला) बार को आनुपातिक रूप से भरते हैं। यह एक छोटा बार चार्ट है जो प्रोग्रेस इंडिकेटर का भेस धारण किए हुए है।

Loader

एक Loader एक घूमता हुआ एनिमेशन है जो कहता है “मैं इस पर काम कर रहा हूँ, एक सेकंड दो।” डेटाबेस लोड होते समय, खिलाड़ी आँकड़े लाए जा रहे हों, या कोई भी async काम हो रहा हो तब दिखता है।

Skeleton

एक Skeleton एक भूरा प्लेसहोल्डर होता है जो अभी तक लोड न हुई सामग्री के आकार की नकल करता है। खाली स्क्रीन या स्पिनर की जगह, आपको भूतिया रूपरेखाएँ दिखती हैं कि कार्ड्स और टेक्स्ट कहाँ होंगे। यह लोडिंग अवस्था का वास्तुशिल्प ब्लूप्रिंट है — “असली फ़र्नीचर रास्ते में है।”

डेटाबेस पेज कार्ड ग्रिड लोड होने के दौरान skeletons का उपयोग करता है। अकेले स्पिनर से कहीं अधिक सुरुचिपूर्ण।

LoadingOverlay

किसी कंपोनेंट के ऊपर फेंका गया एक अर्ध-पारदर्शी कंबल जब वह लोड हो रहा हो। एनालिसिस चार्ट इसका उपयोग करता है — आप ओवरले के पीछे चार्ट अभी भी देख सकते हैं, लेकिन यह धुंधला है, और ऊपर एक स्पिनर है। “मैं अभी भी यहाँ हूँ, बस अपडेट हो रहा हूँ।“

जो चीज़ों को लेबल करते हैं

Badge

एक Badge एक छोटा रंगीन लेबल होता है — जैसे सम्मेलन में नाम टैग। En Parlant~ में, SpeedBadge कंपोनेंट रंग कोडिंग के साथ समय नियंत्रण प्रदर्शित करने के लिए badges का उपयोग करता है:

🩷 गुलाबी — UltraBullet
🔴 लाल — Bullet
🟠 नारंगी — Blitz
🟢 हरा — Rapid
🔵 नीला — Classical
🟣 बैंगनी — Correspondence

प्रत्येक badge छोटा, रंगीन है, और एक नज़र में गेम की गति बता देता है।

Kbd

keyboard का संक्षिप्त रूप। एक कीबोर्ड कुंजी को उस विशिष्ट उभरी-कुंजी स्टाइलिंग के साथ प्रदर्शित करता है। कीबाइंडिंग सेटिंग्स में Ctrl + Z जैसी चीज़ें दिखाने के लिए उपयोग होता है। यह आपके कीबोर्ड की वास्तविक भौतिक कुंजी का CSS पुनर्निर्माण है। मनोहर ढंग से स्क्यूमॉर्फ़िक।

जो अलग करते हैं और समेटते हैं

Divider

एक क्षैतिज रेखा जो सेक्शन अलग करती है। बस। यह एक रेखा है। लेकिन यह एक स्टाइल्ड रेखा है, और वैकल्पिक रूप से बीच में टेक्स्ट लेबल हो सकता है — जैसे इम्पोर्ट modal में ”— OR —” divider जो “PGN पेस्ट करें” को “FEN दर्ज करें” से अलग करता है।

तीस से अधिक फ़ाइलें Divider का उपयोग करती हैं। पता चलता है, चीज़ों को अलग करने की बहुत ज़रूरत पड़ती है।

Collapse

एक Collapse एक सेक्शन है जो एक चिकने एनिमेशन के साथ खुलता और सिकुड़ता है। प्रकट करने के लिए क्लिक करें, छिपाने के लिए क्लिक करें। डेटाबेस फ़िल्टर विकल्प इसका उपयोग करते हैं — आपको हमेशा हर फ़िल्टर देखने की ज़रूरत नहीं, इसलिए वे Collapse के पीछे सिमटे रहते हैं जब तक आप उन्हें नहीं चाहते।

शानदार वाले

RichTextEditor

एक पूर्ण “जो-दिखता-है-वही-मिलता-है” टेक्स्ट एडिटर, TipTap पर बना। बोल्ड, इटैलिक, सूचियाँ, सब कुछ। गेम एनोटेशन लिखने के लिए उपयोग होता है — वे टिप्पणी नोट्स जो आप यह समझाने के लिए जोड़ते हैं कि कोई चाल शानदार क्यों थी या भयानक।

यह एक ऐसा प्रिमिटिव है जो एक अकेली कोशिका की बजाय एक यौगिक जीव अधिक है। अंदर से, यह TipTap + ProseMirror + Mantine स्टाइलिंग है। लेकिन उपयोगकर्ता के नज़रिए से, यह बस एक टेक्स्ट बॉक्स है जहाँ फ़ॉर्मेटिंग काम करती है।

AreaChart

@mantine/charts से (जो Recharts को wrap करता है), AreaChart मूल्यांकन ग्राफ़ को संचालित करता है — वह तरंग जो एनालिसिस पैनल के नीचे चलती है। मिडलाइन के ऊपर सफ़ेद क्षेत्र मतलब सफ़ेद जीत रहा है; नीचे काला क्षेत्र मतलब काला जीत रहा है।

आप चार्ट पर किसी भी बिंदु पर क्लिक करके उस चाल पर जा सकते हैं। इंटरैक्टिव डेटा विज़ुअलाइज़ेशन शतरंज विश्लेषण से मिलता है। इसमें कस्टम tooltips और गेम चरणों (ओपनिंग → मिडलगेम → एंडगेम) को चिह्नित करने वाली रेफ़रेंस लाइन्स भी हैं।

DataTable

mantine-datatable लाइब्रेरी के ज़रिए — सॉर्टिंग, पेजिनेशन, रो सिलेक्शन, और फ़िल्टरिंग वाली एक पूर्ण-विशेषताओं वाली डेटा टेबल। डेटाबेस ब्राउज़र की गेम लिस्ट, प्लेयर लिस्ट, और टूर्नामेंट लिस्ट को संचालित करती है। यह एक स्प्रेडशीट है जो जानती है कि वह एक शतरंज ऐप में है।

अदृश्य वाले

कुछ प्रिमिटिव्स स्वयं कुछ दृश्य रेंडर नहीं करते लेकिन बाकी सब कुछ काम कराते हैं:

MantineProvider — पूरे ऐप को wrap करता है और थीम (रंग, डार्क मोड, कंपोनेंट डिफ़ॉल्ट्स) प्रदान करता है
Portal — रेंडर की गई सामग्री को DOM के दूसरे हिस्से में टेलीपोर्ट करता है
useHotkeys — एक hook (कंपोनेंट नहीं) जो कीबोर्ड शॉर्टकट जोड़ता है
useForm — फ़ॉर्म स्टेट, वैलिडेशन, और एरर हैंडलिंग प्रबंधित करता है
useDebouncedValue — आपके टाइपिंग रुकने का इंतज़ार करता है फिर सर्च चलाता है। शिष्ट hook।

पूरी सूची

संदर्भ के लिए, यहाँ En Parlant~ में उपयोग होने वाला प्रत्येक प्रिमिटिव परिवार है, उनके कार्य के अनुसार समूहित:

श्रेणी	प्रिमिटिव्स
लेआउट	AppShell, Box, Center, Flex, Group, Stack, SimpleGrid, ScrollArea, Portal
सतहें	Card, Paper
ओवरले	Modal, Tooltip, Popover, Menu, ContextMenu, LoadingOverlay
सूचनाएँ	Toast (`@mantine/notifications` के ज़रिए)
बटन	Button, ActionIcon, CloseButton, ThemeIcon
इनपुट	TextInput, Textarea, NumberInput, Select, Autocomplete, Checkbox, Switch, Slider, RangeSlider, SegmentedControl, FileInput, DateInput, MonthPickerInput, YearPickerInput
डेटा प्रदर्शन	Table, DataTable, Badge, Code, Kbd, Rating, Image
टाइपोग्राफ़ी	Text, Title, Anchor
प्रगति	Progress, Loader, Skeleton
संरचना	Divider, Collapse
समृद्ध सामग्री	RichTextEditor (TipTap), AreaChart (Recharts)
थीमिंग	MantineProvider, createTheme, useColorScheme
Hooks	useForm, useHotkeys, useToggle, useDebouncedValue, useClickOutside, useElementSize

सभी Mantine v8 और इसके इकोसिस्टम पैकेजों से प्राप्त: @mantine/core, @mantine/notifications, @mantine/dates, @mantine/charts, @mantine/form, @mantine/tiptap, mantine-datatable, और mantine-contextmenu।

तो अब आप जानते हैं

अगली बार जब आप स्क्रीन के कोने से एक छोटा संदेश ऊपर खिसकता देखें — वह toast है। गेम प्रीव्यू के चारों ओर का आयत — वह card है। सामग्री लोड होने से पहले टिमटिमाते भूरे धब्बे — वे skeletons हैं।

एक बार जब आप नाम सीख लेते हैं, तो आप उन्हें हर जगह देखने लगते हैं। हर ऐप में। हर वेबसाइट पर। वही दो दर्जन प्रिमिटिव्स, हज़ार अलग-अलग तरीकों से पुनर्व्यवस्थित।

सब लेगो है, ऊपर से नीचे तक।