> ## 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 CRM

export const CardTitle = ({children}) => {
  return <div className="text-base font-semibold text-gray-900 dark:text-gray-100">
      {children}
    </div>;
};

## مكونات

<CardGroup cols={2}>
  <Card href="/l/ar/twenty-ui/display" img="https://mintcdn.com/twenty/GMeQVDsw5ST_LXpE/images/user-guide/views/filter.png?fit=max&auto=format&n=GMeQVDsw5ST_LXpE&q=85&s=457ca3d2bad4bdf406ab6b01f22e0bf2" width="1440" height="680" data-path="images/user-guide/views/filter.png">
    <CardTitle>العرض</CardTitle>
    مكونات العرض لعرض المعلومات بصريًا
  </Card>

  <Card href="/l/ar/twenty-ui/progress-bar" img="https://mintcdn.com/twenty/JIRRbviz5phT8G2L/images/user-guide/fields/field.png?fit=max&auto=format&n=JIRRbviz5phT8G2L&q=85&s=d05539b92dcec1953026ba95f2bfe07d" width="1440" height="680" data-path="images/user-guide/fields/field.png">
    <CardTitle>التغذية الراجعة</CardTitle>
    مكونات التغذية الراجعة لإبلاغ المستخدمين
  </Card>

  <Card href="/l/ar/twenty-ui/input" img="https://mintcdn.com/twenty/GMeQVDsw5ST_LXpE/images/user-guide/tips/light-bulb.png?fit=max&auto=format&n=GMeQVDsw5ST_LXpE&q=85&s=2801cd9b03d8ff39bb24472e0311f540" width="1440" height="680" data-path="images/user-guide/tips/light-bulb.png">
    <CardTitle>الإدخال</CardTitle>
    مكونات الإدخال لتفاعل المستخدم
  </Card>

  <Card href="/l/ar/twenty-ui/navigation" img="https://mintcdn.com/twenty/GMeQVDsw5ST_LXpE/images/user-guide/tasks/tasks_header.png?fit=max&auto=format&n=GMeQVDsw5ST_LXpE&q=85&s=4c4e26ebbb9b40e541a945a9cda7c28a" width="1440" height="680" data-path="images/user-guide/tasks/tasks_header.png">
    <CardTitle>التنقل</CardTitle>
    مكونات التنقل لواجهة المستخدم
  </Card>
</CardGroup>