> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# مكونات

> إعدادات مسبقة للتصميم مشتركة ووحدات بناء قابلة لإعادة الاستخدام للتطبيقات، مؤلفة من عناصر Twenty UI الأولية.

## نظرة عامة

تجمع المكوّنات [العناصر الأولية](https://docs.twenty.com/ar/ui/primitives/overview) في إعدادات مسبقة متكررة للتصميم ووحدات بناء قابلة لإعادة الاستخدام للتطبيقات. مثل البدائيات، تتلقى البيانات ودوال الاستدعاء من تطبيقك.

استخدم استيراد العائلة المطابق الموضح أدناه. يبقى إدخال التجميع `twenty-ui/components` متاحًا أيضًا. يمتلك محرر التعليمات البرمجية نقطة دخول خاصة به، `twenty-ui/components/code-editor`، لأنه يتطلب Monaco. راجع [البدء](https://docs.twenty.com/ar/ui/getting-started.md) للتثبيت وإعداد السمة.

## إدخال

استورد من `twenty-ui/components/input`.

| Component | الغرض |
| - | - |
| [MainButton](https://docs.twenty.com/ar/ui/components/input/main-button.md) | إجراءات بارزة بسطح مصمت وارتفاع ونص شبه عريض. |
| [LightButton](https://docs.twenty.com/ar/ui/components/input/light-button.md) | إجراءات خفيفة بتأكيد قياسي أو دقيق. |
| [زر الأيقونة](https://docs.twenty.com/ar/ui/components/input/icon-button.md) | إجراءات أيقونة مربعة أو مستديرة مبنية على Button. |
| [LightIconButton](https://docs.twenty.com/ar/ui/components/input/light-icon-button.md) | إجراءات أيقونة خفيفة مع تركيز قياسي أو دقيق. |
| [زر التفاعل](https://docs.twenty.com/ar/ui/components/input/reaction-button.md) | تفاعلات الرموز التعبيرية مع عدد وحالة ضغط متحكم بها. |
| [منتقي بلد الهاتف](https://docs.twenty.com/ar/ui/components/input/phone-country-picker.md) | أعلام البلدان القابلة للبحث واختيار رمز الاتصال. |
| [مُدرّج الأرقام](https://docs.twenty.com/ar/ui/components/input/number-stepper.md) | إدخال رقمي مدمج مع أزرار خطوة اختيارية. |
| [إدخال البحث](https://docs.twenty.com/ar/ui/components/input/search-input.md) | نص البحث وعناصر تحكم تصفية اختيارية. |
| [تحديد البلد](https://docs.twenty.com/ar/ui/components/input/country-select.md) | خيارات البلدان القابلة للبحث، والأعلام، وخيار فارغ صريح. |
| [منتقي العملة](https://docs.twenty.com/ar/ui/components/input/currency-picker.md) | خيارات عملات قابلة للبحث بتنسيق صريح. |
| [إدخال الصورة](https://docs.twenty.com/ar/ui/components/input/image-input.md) | اختيار الصور ومعاينتها باستخدام عمليات الرفع المملوكة للمتصل. |
| [عنصر التحكم المُقسَّم](https://docs.twenty.com/ar/ui/components/input/segmented-control.md) | خيار أزرار اختيار مضغوط مع خيارات نصية أو أيقونات متصلة. |

## التنقل

استورد من `twenty-ui/components/navigation`.

| Component | الغرض |
| - | - |
| [زر عنصر القائمة](https://docs.twenty.com/ar/ui/components/navigation/list-item-button.md) | أزرار إجراءات أصلية بتنسيق صف القائمة. |
| [قائمة منسدلة](https://docs.twenty.com/ar/ui/components/navigation/dropdown.md) | قوائم الإجراءات، وأدوات اختيار قابلة للبحث، ولوحات النماذج. |
| [زر علامة التبويب](https://docs.twenty.com/ar/ui/components/navigation/tab-button.md) | روابط المسارات والإجراءات المجاورة التي لها المظهر نفسه الذي تتمتع به علامات التبويب. |

## البيانات المعروضة

استورد من `twenty-ui/components/data-display`.

| Component | الغرض |
| - | - |
| [صف التفاصيل](https://docs.twenty.com/ar/ui/components/data-display/details-row.md) | تسميات بمحاذاة، وقيم ملتفة، وإجراءات اختيارية. |
| [صف المقياس](https://docs.twenty.com/ar/ui/components/data-display/metric-row.md) | تسميات وقيم منسقة مع تقدم محدد اختياري. |
| [مجموعة الصور الرمزية](https://docs.twenty.com/ar/ui/components/data-display/avatar-group.md) | صور رمزية متداخلة وأعداد التجاوز. |
| [كتلة الأوامر](https://docs.twenty.com/ar/ui/components/data-display/command-block.md) | نص أمر مع إجراء نسخ اختياري. |
| [شجرة JSON](https://docs.twenty.com/ar/ui/components/data-display/json-tree.md) | قيم JSON قابلة للتوسيع وإدخالات مسماة. |
| [أيقونة المكدس](https://docs.twenty.com/ar/ui/components/data-display/stack-icon.md) | أيقونات مع عنصر أصغر مكدس في الزاوية السفلية اليمنى. |
| [مربع أيقونة ملون](https://docs.twenty.com/ar/ui/components/data-display/tinted-icon-tile.md) | أيقونات على مربعات بألوان السمة. |

## التغذية الراجعة

استورد من `twenty-ui/components/feedback`.

| Component | الغرض |
| - | - |
| [إشعار منبثق](https://docs.twenty.com/ar/ui/components/feedback/toast.md) | الإشعارات، وإدارة قائمة الانتظار، والإغلاق. |
| [تنبيه](https://docs.twenty.com/ar/ui/components/feedback/callout.md) | رسائل دلالية تتضمن إجراءات وخيار الإغلاق. |
| [لافتة مضمنة](https://docs.twenty.com/ar/ui/components/feedback/inline-banner.md) | لافتات مدمجة تتضمن إجراءات اختيارية. |
| [ToastProvider و Toaster](https://docs.twenty.com/ar/ui/components/feedback/toast.md#application-notifications) | مخازن الإشعارات وحدود قائمة الانتظار والعرض. |

## التخطيط

استورد من `twenty-ui/components/layout`.

| Component | الغرض |
| - | - |
| [قسم](https://docs.twenty.com/ar/ui/components/layout/section.md) | محتوى ذو صلة مع عنوان ووصف وإجراء اختياري. |
| [تلاشي متقاطع لأيقونة متحركة](https://docs.twenty.com/ar/ui/components/layout/animated-icon-crossfade.md) | انتقالات أيقونات مدفوعة بالحالة. |
| [قائمة متجاوزة](https://docs.twenty.com/ar/ui/components/layout/overflowing-list.md) | لائم العناصر المرئية واجمع العناصر الفائضة. |

## الإعدادات

استورد من `twenty-ui/components/settings`.

| Component | الغرض |
| - | - |
| [صف الإعدادات](https://docs.twenty.com/ar/ui/components/settings/settings-row.md) | مفاتيح تبديل مُسمّاة للإعدادات وعوامل التصفية. |

## محرر الشفرات

استورد من `twenty-ui/components/code-editor`.

| Component | الغرض |
| - | - |
| [محرر التعليمات البرمجية](https://docs.twenty.com/ar/ui/components/code-editor/code-editor.md) | تحرير التعليمات البرمجية باستخدام Monaco، مع رأس اختياري وسمة Twenty. |

ينتمي التوجيه، وتنسيق السجلات، والعناصر النائبة للمنتج، وحالة التطبيق إلى التطبيق المضيف. توفّر المكونات المشتركة خصائص البيانات، والاستدعاء، والعرض لتلك التكاملات.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.