Skip to content
ENالعربية

The complete design system.
Fluent in Arabic.

Ritla is the Arabic-first design system: React components, ready-made blocks and a matching Figma library.

Browse componentsScan your site free, no sign-up

Try it

One screen. Every way your customers read it.

Real Ritla blocks, live on this page. Switch the direction, the digits and the theme, and every detail follows.

Fintech dashboardMessagingCardsZakat calculatorAsset detail
123١٢٣
EnglishMirroredArabic
DesktopMobile
LTR →

What this screen handles

Mirrors

  • The grid, the header and every card follow the reading direction.
  • The month charts (cash flow, total balance, spending) run right to left in Arabic, and the saving goal dial fills from the start side.

Does not mirror

  • The watchlist sparklines keep time left to right: they show a shape, not dates.
  • Balances, prices, tickers and the account number stay one left-to-right run with their sign and currency.

Built from

Put it in your app

npx ritla add fintech-dashboard

Ritla UIfrom$199

See pricingOpen the block's page

One rule set

Use one or all.

The same documented rules run through the Figma library, the React components and the page checks. One language, from first frame to final release.

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 rules
01

Phone numbers

Inside Arabic text, the digit groups reorder unless the number is isolated.

dir="rtl" lang="ar"
Mirror onlyWith Ritla
Contact line

اتصل بنا على +966 55 123 4567

One number, in order

unicode-bidi: isolate

Blocks

From parts
to whole products.

Ready-made blocks for the screens products need. Start from a block and make it yours.

  • Banking & payments22 blocks
  • Commerce13 blocks
  • Sign-in & onboarding4 blocks
  • Marketing pages16 blocks
  • App screens11 blocks
Browse all 66 blocks

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 at a time, up to 3 scans a day, no signup

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>
Illustration. Not a scan of your site.

Pricing

Own the components.
Subscribe to the checks.

Full pricing and inclusions
One-time purchase

Ritla UI + Ritla for Figma

  • Ritla UIFrom $199
  • Ritla for FigmaFrom $99
  • Components and blocks, a license key, lifetime updates
  • Figma file, variables and token pack, lifetime updates
  • Seats from Solo to Enterprise
See pricing
Monthly subscription

Ritla Scan

  • Free scan$0One page at a time, up to 3 scans a day, no signup
  • Starter$39/mo1 project, 3 scans a month, each crawling up to 5 pages
  • Team$119/mo5 projects, 15 scans a month, each crawling up to 25 pages, scheduled re-scans
Compare Scan plans

FAQ

A few good
questions.

Something else on your mind? Talk to us

Start in Arabic.
Ship in both.

Browse componentsScan your site free, no sign-up