Thoughtfully Arabic. Naturally bilingual.
The Arabic-first
design system.
React components, ready-made blocks, and a matching Figma library. Built for Arabic and English, on the same documented rules that power Ritla Scan.
Arabic-first, in detail
Arabic changes
the details.
Flipping the layout is the easy part. Numbers, signs, icons and type each follow their own rules, and every Ritla component follows them for you.
See the documented rulesdir="rtl" lang="ar"Inside Arabic text, the digit groups reorder unless the number is isolated.
اتصل بنا على +966 55 123 4567
One number, in order
unicode-bidi: isolateSmall parts.
Considered completely.
Start with the controls your product depends on. These are live: type, tab through, pick a date.
Browse all componentsStays left to right in Arabic.
Digits keep their order.
Grouping and currency follow the language.
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
Built with React and Tailwind CSS, against the documented rules that power Ritla Scan.
Blocks
From parts
to whole products.
Ready-made blocks for the screens products need. Start from a block and make it yours.
Browse all blocksصباح الخير، نورا
الرصيد المتاح
24,850.00 ر.س
الحساب الرئيسي •••• 4821
| المعاملة | التاريخ | الحالة | المبلغ |
|---|---|---|---|
| تحويل إلى لينا حداد | 14 أكتوبر | مكتملة | −1,250.00 ر.س |
| دفع فاتورة الكهرباء | 13 أكتوبر | قيد المعالجة | −480.00 ر.س |
| إيداع راتب | 12 أكتوبر | مكتملة | +8,500.00 ر.س |
One rule set
Design it. Build it.
Check it.
The same documented rules run through the Figma library, the React components and the page checks. One language, from first frame to final release.
bg/brand/normaltext/primarydirection: RTLIllustrative markup Design
Ritla for Figma
Variables, components and both directions, on one foundation.
<PhoneInput label="رقم الجوال" defaultCountry="SA" />Illustrative markup Build
Ritla UI
React components that carry the rules into your product.
- Phone number isolated
- Only directional icons mirror
- Arabic line height
Illustrative results Check
Ritla Scan
Checks the finished page, with evidence and a fix for each finding.
Shared rules. Applicable checks. Clear evidence.
Already have
a website?
Ritla Scan checks the finished page for the Arabic details that break. It works on any website, built with Ritla or not.
One page, no signup, 3 scans a day
Sample finding · Bidirectional text
Keep the phone number together.
A phone number inside Arabic text has no direction isolation, so its digit groups reorder.
- Element
.contact-phone- After the fix
<bdi dir="ltr">+966 55 123 4567</bdi>
Who it is for
Made for the people
who ship.
One system for the people who design the product, the people who build it, and the people who hand it over.
Product teams
Bring Arabic behaviour into the product from the first component.
- Arabic and English from one codebase
- Components built against the documented rules
- Scan in CI through the API on the Team plan
Designers
Work in Figma on the same foundation your developers build with.
- Variables for light and dark
- Components drawn for both directions
- Code Connect links each one to React
Agencies
Build consistently across clients, and check the work you deliver.
- One system across every client
- Reports with screenshot evidence to hand over
- Scheduled re-scans catch regressions
Pricing
Own the building blocks.
Subscribe to the checks.
Ritla UI + Ritla for Figma
- Ritla UIPricing coming soon
- Ritla for FigmaPricing coming soon
- Components and blocks, a license key, lifetime updates
- Figma file, variables and token pack, lifetime updates
- Seats from Solo to Enterprise
Ritla Scan
- Free scan$0One page, no signup, 3 scans a day
- Starter$39/mo1 project, 3 scans a month, 5-page crawls
- Team$119/mo5 projects, 15 scans a month, 25-page crawls, scheduled re-scans