المكوّنات

97 مكوّنات مترجمة من Figma إلى React وTailwind، جاهزة للنسخ أو الاستيراد باستخدام npx boardui add. يشترك الكل في رموز التصميم ذاتها، فيتلاءم كل شيء معًا.

الأساسيات

2رموز التصميم التي يُبنى عليها كل شيء.

اللون

لوحة الألوان الكاملة والرموز الدلالية.

DisplayTitleHeadlineBody regularMono caption

الخطوط

مقياس الخط والأوزان وأنماط النص.

أساسي

49المكوّنات الأساسية للاستخدام اليومي.

Plans are billed monthly for every active seat.

الأكورديون

أسئلة شائعة وإعدادات تُفتح في مكانها.

مكوّنان جديدان

يمكن تثبيت Carousel و Input OTP عبر CLI اليوم.

الصورة الرمزية

صورة المستخدم مع بديل الأحرف الأولى.

مسار التنقل

مسار تنقل مع طيّ المستويات.

زر

الإجراءات الأساسية والثانوية والخطرة.

مجموعة الأزرار

صف مدمج من الأزرار القابلة للتحديد.

عرض دوّار

تصفّح البطاقات مع الالتقاط والأسهم والنقاط.

محددغير محددغير محدد

خانة الاختيار

علامة صح متحركة، متغير بطاقة، حجمان.

مكتملقيد الانتظار+14.8%مؤكدفشلقيد المراجعةv2.4.0مسودةمباشر-3.2%تجريبيمؤرشف

الشريحة

رموز تصفية قابلة للإزالة ومضغوطة.

زر الإغلاق

علامة الإغلاق × الصغيرة، منفّذة بشكل صحيح.

لوحة الأوامر

كل صفحة وإجراء على بُعد ⌘K.

review @

حقل الرموز

إشارات @ وأوامر / كرموز.

Q3 report.pdf2.4 MB

قائمة السياق

إجراءات النقر بالزر الأيمن، مع قوائم فرعية.

منتقي الألوان

اختر بالعين أو بقيمة hex أو من الألوان الجاهزة.

MRMateo Ruiz

AHAmir Haddad

مربع التحرير والسرد

اكتب لتصفية القائمة ثم اختر.

Stay, نوفمبر 2026

نوفمبر 2026

س	ح	ن	ث	ر	خ	ج
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

تقويم التاريخ

شهر على الصفحة للتواريخ والنطاقات.

ميرتجان إسمرغول

hi@mertcan.works

اجتماع تعريفي لمدة 30 دقيقة

دعنا نناقش احتياجاتك التصميمية وكيف يمكننا التعاون 🥳

30 دقيقةالإنجليزية

تاريخ الاجتماع, أغسطس 2026

أغسطس 2026

س	ح	ن	ث	ر	خ	ج
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

منتقي التاريخ

تقويم منبثق للتواريخ الفردية.

أو

فاصل

فواصل محتوى مفردة ومزدوجة ومملوءة.

Filters

Narrow the customer list.

StatusActiveTrialingPast dueCanceled

اللوحة المنزلقة

لوحات جانبية وسفلية من أي حافة.

قائمة منسدلة

قوائم قابلة للتركيب - فرق ونماذج وإجراءات.

اسحب وأفلت للرفع أو تحديد

PDF, JPG, PNG, XLSX (الحد الأقصى 8 MB)

جارٍ الرفع ...

تم الرفع بنجاح!

رفع الملفات

اسحب وتحقق وتابع تقدم الرفع.

زر الأيقونة

زر إجراء مربع، أيقونة فقط.

إدخال

حقل نصي مع إضافات والتحقق من الصحة.

إدخال OTP

مربعات رمز الاستخدام الواحد مع اللصق والتعبئة التلقائية.

زر الرابط

إجراء نصي مضمّن بتنسيق رابط.

Storage72‎%‎

Seats84‎%‎

API requests96‎%‎

المقياس

الاستخدام مقابل حد، يتغير لونه كلما امتلأ.

Delete project?

Acme Dashboard and its 24 files will be deleted for everyone. You can't undo this.

النافذة المنبثقة

مربعات حوار وتنبيهات فوق صفحة معتمة.

إشعار

رسائل الحالة مع أيقونات وصور رمزية وإجراءات.

Seats

Discount

حقل الأرقام

أرقام مع أزرار خطوة ووحدات وحدود.

التنقل بين الصفحات

أرقام الصفحات مع الاقتطاع.

النافذة العائمة

محتوى غني مثبّت بزر تشغيل، مع سهم اختياري.

Uploading64‎%‎

التقدم

أشرطة وحلقات، محددة أو ماسحة.

أسبوعيًاشهريًاسنويًا

زر الاختيار

نقطة متدرجة، متغير البطاقة، حجمان.

عنصر التحكم المقسّم

محوّل خيارات بشكل حبة منزلقة.

Amir HaddadDesign

Priya NairDesign

حقل البحث

اكتب للتصفية، وEscape للمسح.

قائمة الاختيار

قائمة اختيار واحد مع بحث.

الهيكل التحميلي

عناصر نائبة تتحول بضبابية إلى المحتوى الحقيقي.

المنزلق

اختيار قيمة واحدة ونطاق الحد الأدنى/الأقصى.

زر اجتماعي

أزرار تسجيل الدخول لـ 24 مزودًا، تشمل الشعارات.

مؤشر التحميل

ضوء دائر متعدد الطبقات للعمل الجاري.

مفتاح التبديل

مفتاح تبديل تشغيل/إيقاف مع حركة نابضة.

Name	Role	Status
Olivia Rhye	Product Designer	Active
Phoenix Baker	Engineer	Active
Lana Steiner	Design Lead	Invited
Demi Wilkinson	Frontend Engineer	Active

جدول

أعمدة قابلة للترتيب، رأس ثابت.

المكوّنات48

كتل6

المخططات البيانية

علامات التبويب

قوائم تبويب بالتسطير والحبة.

Topics

DesignEngineeringMarketingSalesSupport

BugFeature

مجموعة الوسوم

وسوم للتصفية أو الاختيار أو الإزالة.

0/120

منطقة نص

حقل متعدد الأسطر مع النمو التلقائي وعداد الأحرف.

Opens

9:00 AM

Closes

6:00 PM

حقل الوقت

أوقات تُكتب جزءًا بجزء.

الإشعار المنبثق

استدعاء toast() من أي مكان، مكدّسًا وموقوتًا.

src

components

button.tsx

button.module.css

page.tsx

README.md

العرض الشجري

مجلدات متداخلة مع تحديد وتنقل بلوحة المفاتيح.

تلميح الأداة

تلميحات موضعية عند التحويم والتركيز.

كتل

18مكوّنات مركّبة جاهزة للاستخدام.

يفكر

البحث في التوثيق

قراءة الملفات

كتابة الإجابة

تفكير الوكيل

مؤشرات تفكير الوكيل لمحرري الدردشة.

57%

محمّل Composer

شريط ضوء دوّار لمحرر نشط.

الرئيسيproject-sea

57%

لوحة محرّر الرسائل

مدخل دردشة بصفين مع أوضاع الأذونات.

الرئيسيproject-sea

57%

مرفقات Composer

بلاطات الملفات تهبط واحدة تلو الأخرى فوق مربع الإدخال.

مرحبًا بعودتك

سجّل الدخول للمتابعة من حيث توقفت.

أو تابع باستخدام

جديد هنا؟ إنشاء حساب

بطاقة المصادقة

كتل تسجيل الدخول وإنشاء الحساب مع تسجيل الدخول الاجتماعي.

البحث على الويب

مسار البحث مع المصادر التي فتحها الوكيل.

قائمة المهام

سجل وكيل متدفق يكشف الخطوات تباعاً.

حدود استخدام الخطة · Max (5x)

حد الاستخدام لخمس ساعاتتُعاد التهيئة خلال ساعتين و46 دقيقة38%

أسبوعيًا · جميع النماذجتُعاد التهيئة يوم الثلاثاء الساعة 3:00 مساءً3%

أسبوعيًا · Proتُعاد التهيئة يوم الثلاثاء الساعة 3:00 مساءً5%

حدود الوكيل

حدود نافذة السياق وحدود استخدام الخطة.

Which harness controls should stay in the top bar?

Show up sell toggleForces the upsell card up without spending the 4-turn allowance first.Wallpaper pickerThe chat wallpaper choices.Play level-upReplays the free and premium animations

Other

استبيان

أسئلة وضع التخطيط، خطوة بخطوة.

مهندس السحابة

الاسم

الصفة

الوصف

اللغة

الإشعارات

اعرض إشعارًا عندما يصبح الرد جاهزًا.

الصوت

سرعة التشغيل

منشئ الوكيل

إنشاء هوية الوكيل وصورة رمزية متحركة وتفضيلات الصوت.

متبقية 5 خطوات

قراءة ملفات المشروع

تحديث وتثبيت رموز المظهر الفاتح

إضافة رموز المظهر الداكن

إضافة زر تبديل مظهر إلى السجل

تشغيل بناء السجل وفحص الكود وبناء الإنتاج

تقدم الوكيل

تقدم قابل للطي للمهام متعددة الخطوات للذكاء الاصطناعي.

أغسطس 2026

الأحد

الاثنين

الثلاثاء

الأربعاء

الخميس

الجمعة

السبت

+2 المزيد

التقويم

عرض شهري كامل مع أشرطة الأحداث.

شبكة البيانات

جدول بيانات قابل للتحرير مع تحديد وفلاتر وملخصات مباشرة.

إجمالي النتائج

48 عميل

	الحالة
جون كلاركسون	فشل التسليم	5 سبتمبر 2026	$3.412
أسبن لوبين	فشل التسليم	25 مارس 2026	$1.899
مايكل إكستروم	تم الشحن	1 أغسطس 2026	$2.752
كيانا فاكارو	تم الشحن	2 أبريل 2026	$145
ليفيا ساريس	فشل التسليم	14 نوفمبر 2026	$708

جدول البيانات

الفلاتر والتحديد والترقيم متصلة ومُهيَّأة.

مركز الإشعارات

صندوق وارد للنشاط المجمّع مع تبويبات وإجراءات.

الخطة الحالية

Ultra بـ 149$/شهرياً

لديك استخدام أكبر بـ7 مرات من Regular.

الحدود

لديك استخدام أكبر بـ7 مرات من Premium

طلبات الدمج

مزود المراجعة

اختر GitHub أو مزودًا آخر للمراجعات

وجهة طلب الدمج

فتح روابط طلبات الدمج داخل التطبيق

الإشعارات

الطلبات المهمة

تلقي إشعار عند الحاجة إلى قرار مهم

إشعارات النظام

عرض الإشعارات الأساسية عند إكمال الوكيل لمهمة

صوت الإكمال

صوت عند إكمال المهمة

تنبيهات الإرسال

إشعار على الهاتف عندما يراسلك BoardUI

نافذة الإعدادات

إعدادات متعددة الصفحات في مربع حوار متحكم به.

الشريط الجانبي

تنقل تطبيق عائم مع قائمة الفرق.

إجمالي الإيرادات

$152,313.92

مقارنةً بالشهر الماضي

16%

بطاقات الإحصاءات

بطاقات مؤشرات الأداء الرئيسية مع شرائح دلتا أو شريط تذييل.

المخططات البيانية

18بطاقات بيانات للوحات التحكم.

Revenue

$152,314

+16%

$131,304 last year

This year
Last year

مخطط الإيرادات

هذا العام مقارنةً بالعام الماضي، مساحة فوق خط متقطع.

النشاط

الحركة

1,592 kcal

التمرين

1h 45m

الجري

5.2 km

حلقات النشاط

حلقات تقدم متحدة المركز، بأسلوب Apple.

الزوار

94,700

+8.2%

عضوي50,500

الإحالات25,900

مدفوع18,300

مخطط المساحة

سلاسل مساحة مكدّسة أو متداخلة أو بنسبة 100%.

الأجهزة

المتصفحات

أنظمة التشغيل

أحجام الشاشات

الزوار

Chrome53%

Safari27%

Firefox9%

Edge6%

Samsung Internet2%

قائمة شريطية

صفوف تفصيل مرتبة مع أشرطة الحصص وعلامات التبويب.

Sessions · Conversion 3.7%

83,200

+9.4%

مخطط مركّب

أشرطة وخط على محاور مستقلة.

المساهمات هذا العام

958

+14.8%

إجمالي الرموز

562.7M

أعلى استخدام للرموز

12h 54m

أطول مهمة

62 days

أطول سلسلة متواصلة

النشاط

ينايرفبرايرمارسأبريلمايويونيويوليوأغسطسسبتمبرأكتوبرنوفمبرديسمبر

المساهمات

خريطة حرارية للنشاط بأسلوب GitHub.

الأرباح حتى الآن

$7,462

+14.8%

مخطط الأرباح

مخطط شريطي مع مقارنة الفترات.

Sign-up funnel

197

+5.2%

آخر 30 يومًا

تم فتح الرابط

197

بدأ

110

مكتمل

تم التحويل

مخطط القمع

قمع تدفق بمراحل متدرجة وحبوب التحويل.

Active users

1,892

+5.2%

آخر 7 أيام

الاثنين

الثلاثاء

الأربعاء

الخميس

الجمعة

السبت

الأحد

000204060810121416182022

أقلالمزيد

مخطط الخريطة الحرارية

خريطة حرارية مصفوفية مع تدرج يتبع السمة.

الأيام الأكثر نشاطًا

32,459

إجمالي الخطوات

ينايريناير

يناير

فبراير

مارس

أبريل

مايو

يونيو

يوليو

أغسطس

سبتمبر

أكتوبر

نوفمبر

ديسمبر

أكثر الأيام نشاطاً

أشرطة أيام الأسبوع مرتبطة بالحلقات.

الزوار

1,424

+5.2%

Jan – Jun 2024

مخطط الرادار

رادارات مملوءة ومنقطة وخطية وتسجيلية.

الزوار

925

+5.2%

Jan – Jun 2024

مخطط شعاعي

حلقات ومقاييس ومقياس نصف دائري مكدّس.

الإيرادات

$18,240

+9.4%

مخطط خطي

خط منحنٍ أو حاد فوق منطقة ناعمة.

Tracked time

86h

هذا الأسبوع

مخطط سانكي

مخطط تدفق بروابط ملوّنة وحصص.

Revenue per account

742

+6.8%

الإيراداتالجلسات

البداية270

النمو783

المقياس1,388

مخطط التشتت

نقاط الارتباط، فقاعات عند تحديد الحجم.

درجة النوم

ممتاز

29/6 - 5/729/6 - 5/7

المدة: 7h 50m

49/50

وقت النوم: أبكر بـ20 دقيقة

29/30

الانقطاعات: 5 دقائق استيقاظ

20/20

درجة النوم

مقياس شعاعي مع تفصيل الدرجات.

Pipeline

4,820

+2.4%

آخر 30 يومًا

الزيارات

4,820100%

التسجيل

3,26068%

نشط

2,01042%

Pro

1,16024%

الفريق

54011%

المؤسسات

1804%

الزيارات

4,820

التسجيل

3,260

نشط

2,010

Pro

1,160

الفريق

540

المؤسسات

180

أشرطة المراحل

مراحل القمع كأشرطة أفقية مستديرة.

الخطوات

31,600

إجمالي الخطوات

29/6 - 5/729/6 - 5/7

مخطط الخطوات

الخطوات اليومية مع علامة الهدف.

القوالب

10شاشات كاملة مترابطة وجاهزة للاستخدام.

محادثة جديدة

كيف يمكنني مساعدتك؟

تعمل هذه المحادثة باستخدام مفتاح API الخاص بك. يبقى السجل في هذا المتصفح.

غير مُهيَّأ

محادثة جديدة

بداية المحادثة

دردشة مجانية وقابلة للنشر على مفتاح نموذجك الخاص.

دردشة متعددة الوكلاء

وكلاء متحركون، محادثة فردية وجماعية، ومحرر أفاتار مباشر.

الكود

12 تغييرًا غير محفوظ+156-23

boardui/app/components/button.tsx +74

جديد

1import type { Metadata } from "next";2import Link from "next/link";3import { ComponentDetail } from "@/components/application/docs/component-detail";4import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";5
6export const metadata: Metadata = {7  title: "Home Dashboard Template — React + Tailwind (Pro)",8  description:9    "Full admin dashboard template for React + Tailwind CSS — sidebar navigation, KPI cards, bar chart, and a customers data table. A BoardUI Pro template.",10};11
12const PREVIEW_CODE = `import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";13
14export default function DashboardPage() {15  // Full screen: floating sidebar, header, KPI cards,16  // earnings bar chart, and the customers data table.17  return <DashboardShell />;18}`;19
20export default function HomeDashboardDetail() {21  return (22    <ComponentDetail23      wide24      breadcrumb={[25        { label: "Board UI", href: "/" },26        { label: "Components", href: "/components" },27        { label: "Home Dashboard" },28      ]}29      title="Home Dashboard"30      description="A complete admin dashboard screen — floating sidebar navigation, header with search and notifications, KPI stat cards, an earnings bar chart, and a customers data table."31      preview={32        <div className="h-[760px] w-full overflow-hidden rounded-2xl border border-border-button-default">33          <div className="origin-top-left scale-[0.8] [width:125%]">34            <DashboardShell />35          </div>36        </div>37      }38      previewClassName="p-3 sm:p-4"39      previewCode={PREVIEW_CODE}40      sections={[41        {42          id: "full-template",43          title: "Live template",44          body: (

محادثة الوكيل

حدّث رموز الألوان للمظهر الداكن وأضف زر تبديل مظهر قابلًا لإعادة الاستخدام إلى السجل. شغّل فحص الكود وبناء الإنتاج عند الانتهاء.

57%

12 تغييرًا غير محفوظ+156-23

boardui/app/components/button.tsx +74

جديد

1import type { Metadata } from "next";2import Link from "next/link";3import { ComponentDetail } from "@/components/application/docs/component-detail";4import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";5
6export const metadata: Metadata = {7  title: "Home Dashboard Template — React + Tailwind (Pro)",8  description:9    "Full admin dashboard template for React + Tailwind CSS — sidebar navigation, KPI cards, bar chart, and a customers data table. A BoardUI Pro template.",10};11
12const PREVIEW_CODE = `import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";13
14export default function DashboardPage() {15  // Full screen: floating sidebar, header, KPI cards,16  // earnings bar chart, and the customers data table.17  return <DashboardShell />;18}`;19
20export default function HomeDashboardDetail() {21  return (22    <ComponentDetail23      wide24      breadcrumb={[25        { label: "Board UI", href: "/" },26        { label: "Components", href: "/components" },27        { label: "Home Dashboard" },28      ]}29      title="Home Dashboard"30      description="A complete admin dashboard screen — floating sidebar navigation, header with search and notifications, KPI stat cards, an earnings bar chart, and a customers data table."31      preview={32        <div className="h-[760px] w-full overflow-hidden rounded-2xl border border-border-button-default">33          <div className="origin-top-left scale-[0.8] [width:125%]">34            <DashboardShell />35          </div>36        </div>37      }38      previewClassName="p-3 sm:p-4"39      previewCode={PREVIEW_CODE}40      sections={[41        {42          id: "full-template",43          title: "Live template",44          body: (

محادثة الذكاء الاصطناعي

تطبيق دردشة كامل مع لوحة الشيفرة والمحرر.

المعرض

توليد الصور

أنشئ رسمًا تحريريًا كلاسيكيًا لليونيل ميسي يراوغ الكرة بقميص الأرجنتين على خلفية زرقاء.

57%

توليد الصور بالذكاء الاصطناعي

سلسلة طلبات مع إطار توليد ولوحة معرض.

الوكلاء

32 وكيل

ديسمبرديسمبر

14 يونيو

اليوم

الرموز

667.7مليون رمز

+9.4%

14 يونيو

اليوم

ملف الذكاء الاصطناعي

ملف المساهمات مع خريطة حرارة ورسوم بيانية.

لوحة التحكم المالية

مخطط سانكي للتدفق النقدي، وحلقات الإنفاق، وجدول المعاملات.

لوحة التحكم الرئيسية

مؤشرات الأداء الرئيسية واتجاه الإيرادات وجدول العملاء.

لوحة تحكم التسويق

قمع الاستحواذ، ومخططات الإنفاق، وجدول الحملات.

الملف الطبي

نظرة عامة على المريض مع مخططات صحية.

مهام تصميم BoardUI

قائمة الانتظار

3/8

DS-38تسليم الوكيل

منخفضvibl

استكشاف بطاقات الموافقة لتسليم الوكلاء

Since 14 Sep

FE-86لوحة المشروع

منخفضfirstview

إضافة عروض محفوظة لكل فريق مشروع

Since 13 Sep

BE-23واجهة برمجة النشاط

متوسطvibl

تسجيل سجل تدقيق لإجراءات الوكلاء

Since 12 Sep

المهام المطلوبة

3/5

DS-34الأساسيات

مرتفعBoardUI

تعريف رموز دلالية للأسطح المرتفعة

Since 12 Sep

FE-82محرّر الرسائل

منخفضfirstview

إضافة التنقل بلوحة المفاتيح لاختيار النموذج

Since 11 Sep

BE-19واجهة برمجة الاستخدام

منخفضvibl

إرجاع حدود الاستخدام مع أوقات إعادة التعيين

Since 10 Sep

قيد التنفيذ

2/4

FE-79تقدم الوكيل

متوسطfirstview

تحريك مجموعات المهام المتداخلة أثناء البث

Since 9 Sep

DS-31المظهر الداكن

عاجلBoardUI

ضبط تباين المخططات على البطاقات الداكنة

Since 8 Sep

مراجعة

1/3

FE-76استبيان

منخفضvibl

تحسين الانتقال بين أسئلة الخطة

Since 7 Sep

منجز

4/6

DS-27الصور الرمزية

منخفضBoardUI

إضافة مجموعات صور رمزية متداخلة للبطاقات

Completed 6 Sep

FE-71لوحة الاستوديو

متوسطfirstview

الحفاظ على محاذاة الشاشات عند التكبير

Completed 5 Sep

BE-16السجل

منخفضBoardUI

التحقق من تبعيات القوالب أثناء البناء

Completed 4 Sep

DS-25الحركة

منخفضBoardUI

توثيق سلوك الكتل مع تقليل الحركة

Completed 3 Sep

لوحة المشروع

مساحة عمل Kanban مع لوحات التذاكر والتعليقات ومخططات رموز التصميم.

الأساسيات

اللون

الخطوط

أساسي

How does billing work?

Can I change plans later?

What happens to my data?

الأكورديون

إعلان

الصورة الرمزية

مسار التنقل

زر

مجموعة الأزرار

عرض دوّار

خانة الاختيار

الشريحة

زر الإغلاق

لوحة الأوامر

حقل الرموز

قائمة السياق

منتقي الألوان

مربع التحرير والسرد

Stay, نوفمبر 2026

تقويم التاريخ

تاريخ الاجتماع, أغسطس 2026

منتقي التاريخ

فاصل

Filters

اللوحة المنزلقة

قائمة منسدلة

رفع الملفات

زر الأيقونة

إدخال

إدخال OTP

زر الرابط

المقياس

Delete project?

النافذة المنبثقة

إشعار

حقل الأرقام

التنقل بين الصفحات

النافذة العائمة

التقدم

زر الاختيار

عنصر التحكم المقسّم

حقل البحث

قائمة الاختيار

الهيكل التحميلي

المنزلق

زر اجتماعي

مؤشر التحميل

مفتاح التبديل

جدول

علامات التبويب

مجموعة الوسوم

منطقة نص

حقل الوقت

الإشعار المنبثق

العرض الشجري

تلميح الأداة

كتل

تفكير الوكيل

محمّل Composer

لوحة محرّر الرسائل

مرفقات Composer

مرحبًا بعودتك

بطاقة المصادقة

البحث على الويب

قائمة المهام

حدود الوكيل

استبيان

منشئ الوكيل

تقدم الوكيل

التقويم

شبكة البيانات

جدول البيانات

الإشعارات

مركز الإشعارات

نافذة الإعدادات

الشريط الجانبي