---
title: "शुरुआत करें"
description: "Tanrei में क्या-क्या मिलता है, उसके हिस्से आपस में कैसे जुड़ते हैं, और अपने प्लैटफ़ॉर्म पर कहाँ से शुरू करें।"
url: "https://tanrei.chnotchy.com/hi/getting-started/"
last_updated: 2026-10-20T01:38:40.000Z
---

# शुरुआत करें

> Tanrei में क्या-क्या मिलता है, उसके हिस्से आपस में कैसे जुड़ते हैं, और अपने प्लैटफ़ॉर्म पर कहाँ से शुरू करें।

Tanrei एक डिज़ाइन सिस्टम है जो हर प्लैटफ़ॉर्म की नेटिव लाइब्रेरी के रूप में मिलता है। आपको कोई रनटाइम या क्रॉस-प्लैटफ़ॉर्म फ़्रेमवर्क नहीं अपनाना पड़ता; जिस प्लैटफ़ॉर्म पर आप पहले से काम कर रहे हैं, उसका पैकेज जोड़ें और आपको वही टोकन, कंपोनेंट और सुलभता का व्यवहार मिलता है जो बाक़ी सभी प्लैटफ़ॉर्म पर है।

> [!WARNING]
> **प्री-रिलीज़**
>
> `0.1.0-next.0` npm के dist-tag `next` के साथ प्रकाशित है: `0.1.0` तक, पैकेज इंस्टॉल करते समय उसके नाम के बाद `@next` जोड़ें (`npm install @tanrei/web@next`)। 0.x प्री-रिलीज़ के दौरान पुराने वर्शन के साथ संगतता नहीं रखी जाती: कोई भी प्री-रिलीज़ पहले से अप्रचलित घोषित किए बिना कुछ भी तोड़ सकती है, और क्या टूटा, यह उसका changeset बताता है।
>
> अभी प्रकाशित नहीं: SwiftUI, Jetpack Compose, Flutter, और React Native। कोई प्लैटफ़ॉर्म मौजूदा स्पेक की बराबरी पर आने के बाद ही प्रकाशित होता है, और तब तक उसका CI रुका हुआ है; इस बीच उसकी गाइड बताती है कि उसे सोर्स से कैसे जोड़ा जाता है।

## अपना प्लैटफ़ॉर्म चुनें

- [Web](https://tanrei.chnotchy.com/hi/getting-started/web/): CSS कस्टम प्रॉपर्टी और Web Components। किसी भी फ़्रेमवर्क के साथ चलता है, और बिना फ़्रेमवर्क के भी।
- [React](https://tanrei.chnotchy.com/hi/getting-started/react/): Web Components से जनरेट किए गए, टाइप वाले React कंपोनेंट।
- [SwiftUI](https://tanrei.chnotchy.com/hi/getting-started/swiftui/): iOS और macOS के लिए एक Swift पैकेज।
- [Jetpack Compose](https://tanrei.chnotchy.com/hi/getting-started/compose/): Compose Foundation पर बनी Android लाइब्रेरी, Material पर कोई निर्भरता नहीं।
- [Flutter](https://tanrei.chnotchy.com/hi/getting-started/flutter/): पूरी तरह Dart में लिखा पैकेज, जो MaterialApp के साथ भी चलता है और उसके बिना भी।
- [React Native](https://tanrei.chnotchy.com/hi/getting-started/react-native/): सिर्फ़ TypeScript में लिखे कंपोनेंट, कोई नेटिव मॉड्यूल नहीं।

## एक ही बटन, छह तरीक़ों से

हर कंपोनेंट एक ही बार, प्लैटफ़ॉर्म से स्वतंत्र स्पेक में परिभाषित होता है, और हर प्लैटफ़ॉर्म पर उसके अपने तरीक़े से इम्प्लीमेंट किया जाता है। आप जो टैब चुनते हैं, वह पूरी साइट पर याद रखा जाता है।

**Web**

```html
<tanrei-button variant="tonal">ड्राफ़्ट सेव करें</tanrei-button>
```

**React**

```tsx
<Button variant="tonal" onClick={saveDraft}>ड्राफ़्ट सेव करें</Button>
```

**SwiftUI**

```swift
TanreiButton("ड्राफ़्ट सेव करें", variant: .tonal) { saveDraft() }
```

**Compose**

```kotlin
TanreiButton(text = "ड्राफ़्ट सेव करें", onClick = ::saveDraft, variant = TanreiButtonVariant.Tonal)
```

**Flutter**

```dart
TanreiButton(variant: TanreiButtonVariant.tonal, onPressed: saveDraft, child: const Text('ड्राफ़्ट सेव करें'))
```

**React Native**

```tsx
<Button variant="tonal" onPress={saveDraft}>ड्राफ़्ट सेव करें</Button>
```

## हर प्लैटफ़ॉर्म पर आपको क्या मिलता है

- **टोकन।** कलर रोल, टाइप स्केल, शेप, एलिवेशन, मोशन, स्टेट और स्पेसिंग के मान, जो एक ही DTCG सोर्स से CSS कस्टम प्रॉपर्टी और Swift, Kotlin, Dart और TypeScript के कॉन्स्टेंट के रूप में जनरेट होते हैं।
- **थीम।** लाइट और डार्क, और दोनों में स्टैंडर्ड, मध्यम और उच्च कंट्रास्ट। डिफ़ॉल्ट रूप से थीम ऑपरेटिंग सिस्टम की सेटिंग के अनुसार चलती है; आप पूरे ऐप या किसी सबट्री के लिए इनमें से कोई भी सेटिंग तय कर सकते हैं।
- **कंपोनेंट।** साझा स्पेक के इम्प्लीमेंटेशन, जिनमें वेरिएंट, स्टेट और कीबोर्ड का व्यवहार हर जगह एक जैसा है।
- **सुलभता के डिफ़ॉल्ट।** न्यूनतम हिट टार्गेट, दिखने वाली फ़ोकस रिंग, 200% तक बड़ा करने पर भी ठीक रहने वाला टेक्स्ट, और “मोशन कम करें” सेटिंग का पालन — ये सब पहले से शामिल हैं, हर स्क्रीन पर अलग से करने के लिए नहीं छोड़े गए।

## ये दस्तावेज़ कैसे पढ़ें

- [बुनियादी बातें](https://tanrei.chnotchy.com/hi/foundations/brand/) में विचार और नियम समझाए गए हैं।
- [टोकन रेफ़रेंस](https://tanrei.chnotchy.com/hi/tokens/color/) में हर मान की सूची है, जो सीधे टोकन फ़ाइलों से रेंडर होती है।
- [कंपोनेंट](https://tanrei.chnotchy.com/hi/components/) के पेज एक ही ढाँचे पर चलते हैं: अवलोकन, स्पेक, दिशानिर्देश, सुलभता। इन पेजों की टेबल कंपोनेंट के स्पेक से बनती हैं, इसलिए वे पुरानी नहीं पड़ सकतीं।
- [स्थिति](https://tanrei.chnotchy.com/hi/status/) रिपॉज़िटरी से जनरेट होती है।
- [AI एजेंट के साथ Tanrei का इस्तेमाल](https://tanrei.chnotchy.com/hi/getting-started/ai-agents/) बताता है कि MCP सर्वर कैसे जोड़ें, और कोडिंग एजेंट को Tanrei से आपका UI लिखने के नियम देता है।