ابنِ منتجات يثق بها الناس، بالعربية والإنجليزية.
نظام تصميم Truvar.ai: أكثر من ٢٣٠ مكوّنًا بلغة React سهلة الاستخدام للجميع، ورموز تصميم، ودعم كامل للكتابة من اليمين لليسار، ويعمل كتطبيق أصلي على كل هاتف.
pnpm add @truvar-ai/design-systemوجدت ٣ مواعيد متاحة يوم الثلاثاء. أحجز الساعة ١٠:٣٠؟
- راجعت التقويم
- وجدت ٣ مواعيد متاحة
- بانتظار موافقتك
- مبني على React Aria
- Next.js و Vite و Electron
- رموز تصميم (DTCG)
- العربية والإنجليزية
- مفتوح المصدر، MIT
لماذا Truvar
كل ما يحتاجه منتج جاد، من اليوم الأول
توقف عن إعادة بناء الأساسيات. ابدأ بمكونات جاهزة للجميع وبلغتين ومختبرة على الهواتف.
ممكن أنقل موعدي ليوم الخميس الساعة ٤ العصر؟
العربية أولًا، وليست إضافة
التخطيط ينعكس تلقائيًا، والتواريخ والأرقام والتقويم وأسهم لوحة المفاتيح تتبع اللغة، وكل خط عربي مختار ليتناسب مع نظيره الإنجليزي.
سهل الاستخدام للجميع
التنقل بلوحة المفاتيح والتركيز وقارئات الشاشة مبنية على React Aria، فيعمل كل مكوّن للجميع.
فاتح وداكن
الوضعان مدمجان ويتبعان إعداد الجهاز، أو اختر أحدهما بنفسك.
الوارد
كتطبيق أصلي على الهاتف
أوراق سفلية وشريط تبويب وأهداف بحجم الإصبع وبدون تكبير عند الكتابة. يبدو كتطبيق، لا كصفحة ويب.
مصمم لمنتجات الذكاء الاصطناعي
خطوات الوكيل والموافقات والمكالمات الصوتية والنصوص، وعلامة توضح متى يعمل الذكاء الاصطناعي.
مجموعة واحدة من الرموز
الألوان والخطوط والمسافات والحواف في رموز تصميم، فيصل أي تغيير إلى كل مكان مرة واحدة.
المكونات
جرّبها هنا مباشرة
هذه هي المكونات الحقيقية، وليست صورًا. اضغط واكتب وتنقل بينها.
أمثلة
شاشات كاملة، جاهزة لتبدأ منها
شاهد المكونات تعمل معًا في شاشات منتجات حقيقية، باللغتين وبالوضعين.
للمطورين
من التثبيت إلى أول شاشة في دقائق
يعمل مع Next.js (App Router و Pages) و Vite و Electron وأي تطبيق React 18 أو 19. كل مكوّن جاهز للاستخدام داخل صفحات Server Components.
ثبّت الحزمة
pnpm add @truvar-ai/design-systemأضف الأنماط مرة واحدة
import "@truvar-ai/design-system/styles.css"; export default function RootLayout({ children }) { return ( <html lang="ar" dir="rtl"> <body>{children}</body> </html> ); }استخدم أي مكوّن
import { Button, TextField, PhoneField } from "@truvar-ai/design-system"; export function SignUp() { return ( <form> <TextField label="Name" /> <PhoneField label="Mobile" defaultCountry="EG" /> <Button type="submit">Create account</Button> </form> ); }