---
title: "البدء"
description: "ما الذي يقدّمه Tanrei، وكيف تترابط أجزاؤه، ومن أين تبدأ على منصتك."
url: "https://tanrei.chnotchy.com/ar/getting-started/"
last_updated: 2026-10-20T01:38:40.000Z
---

# البدء

> ما الذي يقدّمه Tanrei، وكيف تترابط أجزاؤه، ومن أين تبدأ على منصتك.

نظام التصميم Tanrei يُقدَّم في صورة مكتبات أصلية لكل منصة. لا تحتاج إلى بيئة تشغيل خاصة ولا إلى إطار عمل متعدد المنصات؛ يكفي أن تضيف الحزمة الخاصة بالمنصة التي تبني عليها أصلًا، فتحصل على الرموز (tokens) والمكوّنات وسلوك إمكانية الوصول نفسها الموجودة على سائر المنصات.

> [!WARNING]
> **إصدار تمهيدي**
>
> نُشر `0.1.0-next.0` تحت وسم التوزيع (dist-tag) `next` في npm: وحتى `0.1.0`، أضِف `@next` بعد اسم الحزمة عند تثبيتها (`npm install @tanrei/web@next`). لا يُحافَظ على التوافق مع الإصدارات السابقة طوال الإصدارات التمهيدية 0.x: قد يكسر أي إصدار تمهيدي أي شيء دون أن يُعلَن شيء مهمَلًا قبله، ويذكر الـ changeset الخاص به ما الذي انكسر.
>
> لم يُنشر بعد: SwiftUI وJetpack Compose وFlutter وReact Native. تُنشر المنصة حين تلحق بالمواصفات الحالية، والتكامل المستمر (CI) الخاص بها متوقف حتى ذلك الحين؛ وفي الأثناء يبيّن دليلها كيف تُضاف من الشيفرة المصدرية.

## اختر منصتك

- [Web](https://tanrei.chnotchy.com/ar/getting-started/web/): خصائص CSS المخصصة و Web Components. تعمل مع أي إطار عمل، أو من دون إطار.
- [React](https://tanrei.chnotchy.com/ar/getting-started/react/): مكوّنات React محدَّدة الأنواع، مولَّدة من Web Components.
- [SwiftUI](https://tanrei.chnotchy.com/ar/getting-started/swiftui/): حزمة Swift لنظامي iOS و macOS.
- [Jetpack Compose](https://tanrei.chnotchy.com/ar/getting-started/compose/): مكتبة Android مبنية على Compose Foundation، بلا اعتماد على Material.
- [Flutter](https://tanrei.chnotchy.com/ar/getting-started/flutter/): حزمة مكتوبة بلغة Dart وحدها، تعمل مع MaterialApp أو من دونه.
- [React Native](https://tanrei.chnotchy.com/ar/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.
- **السمات.** فاتحة وداكنة، ولكل منهما تباين قياسي ومتوسط وعالٍ. تتبع السمة نظام التشغيل افتراضيًّا، ويمكنك فرض أيٍّ من الإعدادين على التطبيق كله أو على شجرة فرعية منه.
- **المكوّنات.** تنفيذات للمواصفات المشتركة، بالطُرُز (variants) والحالات وسلوك لوحة المفاتيح نفسها في كل مكان.
- **إعدادات إمكانية الوصول الافتراضية.** الحد الأدنى لهدف اللمس، وحلقة تركيز مرئية، ونص يتحمّل التكبير حتى 200%، واحترام إعداد تقليل الحركة: كلها مبنية في النظام وليست متروكة لكل شاشة.

## كيف تقرأ هذه الوثائق

- [الأسس](https://tanrei.chnotchy.com/ar/foundations/brand/) تشرح الأفكار والقواعد.
- [مرجع الرموز](https://tanrei.chnotchy.com/ar/tokens/color/) يسرد كل قيمة، معروضة مباشرة من ملفات الرموز.
- [المكوّنات](https://tanrei.chnotchy.com/ar/components/) تتبع قالبًا واحدًا: نظرة عامة، ثم المواصفات، ثم الإرشادات، ثم إمكانية الوصول. الجداول في تلك الصفحات مصدرها مواصفة المكوّن، فلا يمكن أن تتقادم.
- [الحالة](https://tanrei.chnotchy.com/ar/status/) مولَّدة من المستودع.
- [استخدام Tanrei مع وكلاء الذكاء الاصطناعي](https://tanrei.chnotchy.com/ar/getting-started/ai-agents/) تبيّن كيف تصل خادم MCP، وتعطي وكيل البرمجة قواعد كتابة واجهتك بمكوّنات Tanrei.