Arabic-first design system — not localized later

Copy it as code, or hand it to your AI

A library of components, blocks and templates — every item verified in Arabic and English, dark and light. Take it as clean code, or as a ready prompt for any AI tool.

Browse the library See a full prompt

Press AR / English above and watch every card mirror — sidebar, arrows, toast direction, table alignment.

Component library

193

Shawarma House

Levantine · 4.6 ★ · 25 min

Detail Page Bar

Back, title and action — the title appears once the heading scrolls away

Code Prompt

Karam

Available balance

Greeting Bar with Account

The greeting follows the clock, and the balance can be hidden

Code Prompt

AlUla

AlUla Old town · 3 nights

per person · stay included

A mud-and-stone lodge inside the old wall, a short walk from the Hegra front. Rooms look onto the palm grove, and breakfast is served in the courtyard.

Immersive Transparent Bar

Transparent over the cover, gaining a surface once it scrolls past

Code Prompt

My library

14 books · 3 in progress

Large Title Bar

The large title collapses into a compact one on scroll

Code Prompt

Articles

Why dir=rtl is not enough

Reading Progress Bar

Progress computed from the scrollable height, not from scroll position alone

Code Prompt

Bar with Inline Search

Search lives in the bar, with a cancel button that appears on focus

Code Prompt

Transactions

Bar with Segmented Filter

A segment that swaps content and recomputes the visible total

Code Prompt

of goal

Summer trip

Remaining

Monthly rate

Expected by

Savings Goal Card

Remaining amount and expected date derived from the monthly rate

Code Prompt

Drink water Eight glasses daily

day streak

of last 30 days

best streak

Habit Card with Computed Streak

Streak and rate computed from the day log, never stored

Code Prompt

Saved episodes

Mini Player Card

A draggable scrubber, with time-left adjusted for playback speed

Code Prompt

Story Cards with Progress Ring

A dashed ring built from the segment count; seen stories dim

Code Prompt

Inbox

Swipe any message horizontally

Swipe-to-Reveal Card

A swipe reveals two actions and springs back below the threshold

Code Prompt

Concert Classic Tarab Night Saraya Theatre · Beirut

Date

Time20:30

SeatC-14

Ticket Card with Code

Side notches, a generated barcode, and a countdown from the event date

Code Prompt

Your order is on the way SA-77410-3

Live Tracking Card

A vertical timeline with an ETA derived from the current stage

Code Prompt

PenTool Bank

Name ABDULLAH ALHARBI Expires

CVV

Never share these details

Flipping Bank Card

Two faces, with a masked number revealed briefly then re-hidden

Code Prompt

Muscat

Weather Card with Hourly Curve

The curve is generated from the values, scaled to their own min and max

Code Prompt

Paired Floating Actions

A primary and a secondary action at different sizes and weights

Code Prompt

FAQ

Drag it — it snaps to the nearest edge

Draggable FAB

Drags freely, snaps to the nearest edge, and never leaves the screen

Code Prompt

My notes

Extended FAB that Collapses

Starts with a label and collapses to an icon on scroll

Code Prompt

Today's spending

FAB that Morphs into a Panel

Expands from a circle into a form and returns on close

Code Prompt

Media library

FAB with Progress Ring

An SVG ring computed from its own circumference, not a fixed width

Code Prompt

Latest updates

Scroll-to-Top FAB

Appears after enough distance and returns smoothly — or instantly when motion is reduced

Code Prompt

My tasks

Speed Dial FAB

Opens named actions in sequence, closing on Escape and on the scrim

Code Prompt

Today's tasks

Checklist with Computed Progress

Completed items sink to the bottom; percentage and remaining are computed

Code Prompt

Latest photos

Infinite Scroll List

An intersection observer loads the next batch and states clearly when it ends

Code Prompt

Pull-to-Refresh List

Increasing resistance, a release threshold, and a spinner that announces state

Code Prompt

Playlist

Drag the ⠿ handle or use arrows

Reorderable List

Drag by the handle, with an arrow-key path as the alternative

Code Prompt

Sectioned List with Side Index

Sticky headers and a letter index that jumps to its section

Code Prompt

Settings

Grouped Settings List

Titled groups with several working row types

Code Prompt

Feed

List with Loading Skeleton

The skeleton matches the real content’s size so nothing shifts on arrival

Code Prompt

My files

Action Sheet

Grouped actions with the destructive one separated and marked

Code Prompt

Account settings

Irreversible Confirm Sheet

Requires typing a confirmation word before the button activates

Code Prompt

Details

Drag the sheet handle up and down

Bottom Sheet with Detents

Third, half and full — it settles at the nearest detent on release

Code Prompt

Fashion

Filter Sheet

Changes stay pending until Apply — Reset restores the last applied state

Code Prompt

Checkout

Total

Payment Method Sheet

Each method carries its fee, and the total recomputes on switch

Code Prompt

Book an appointment

Selected

Wheel Picker Sheet

Wheels snap on scroll and the value is read from the position

Code Prompt

Colour guide for Arabic interfaces

Article · 8 min read

Share Sheet Grid

A row of people, a row of actions, and a copy-link that actually copies

Code Prompt

My work

Icon that Expands into Search

A small icon opens a full bar and closes it on Escape

Code Prompt

Search with Filter Chips

Horizontally scrolling chips narrow the result, with a counter that follows

Code Prompt

Library catalogue

Sticky In-list Search

Sticks to the top of the list on scroll and reports the match count

Code Prompt

Floating Search over a Map

Floats above the map with results sliding out beneath it

Code Prompt

Search with Multiple Inputs

Type, scan a code, or use location — three ways into one result

Code Prompt

Search products

Full-screen Search Sheet

Tapping the bar opens a search screen with history and trending

Code Prompt

Type a letter — arrow to move, Enter to accept

Search with Keyboard Suggestions

Live suggestions navigable with arrows and accepted with Enter

Code Prompt

Tab Bar with Count Badges

The badge caps at 99+ and the total is summed from the conversations

Code Prompt

Tab Bar with Centre Action

Four tabs with one raised primary action in the middle

Code Prompt

Dot Page Indicator

Follows the horizontal swipe and jumps when a dot is pressed

Code Prompt

Icon and Label Tab Bar

Five items maximum, each with an accessible name and a sliding indicator

Code Prompt

Label-only Tab Bar

No icons — plain labels with a moving underline

Code Prompt

Morphing Tab Bar

The active item expands to reveal its label; the rest stay icons

Code Prompt

Today's activity

Floating Pill Tab Bar

Floats above content and hides when scrolling down

Code Prompt

Item	Qty	Price	Status
Annual license	12	1,200.00	Active
Team training	3	400.50	Pending
Priority support	1	9,840.75	Active
Total	16	11,441.25

Arabic Data Table

Numbers align left inside a table that reads right

Code Prompt

Name as in ID Required

FirstMohammed FatherAbdullah GrandfatherSalem FamilyAl‑Khatib

Full name Mohammed Abdullah Salem Al‑Khatib

Quadruple Name Field

Official Gulf names have four parts, not two

Code Prompt

RTL verified

[email protected]

Password

••••••••••

Auth Form

Forms

Code Prompt

We find the right property for you

Tell us what you want and we send matching options within 24 hours.

Reply within a working day
Riyadh · Jeddah · Khobar

Contact Section

A multi-field form validating on blur, with an error summary

Code Prompt

Book your first consultation free

We send available slots within one working hour.

Call-to-Action Section

One field, one button, and validation only after the field is left

Code Prompt

FAQ

What clients ask before their first shipment

How long is domestic delivery?

One to three business days by city, with a tracking number issued at pickup.

Do you ship fragile goods?

Yes, with dedicated packing and a surcharge based on volumetric weight.

What if a shipment is late?

We refund the full shipping fee if delivery slips more than two days past the agreed date.

Is cash on delivery available?

Available in major cities; funds settle to your account within three business days.

FAQ Section

An accordion built on native details — works with JavaScript off

Code Prompt

WHAT WE DO

Campaigns measured by outcome, not impressions

Precise targeting

Segments built from real behaviour, not demographic guesswork.
Arabic-native content

Written natively, in the dialect your market actually uses.
Weekly reporting

One number that matters, and the detail behind it.

Three-up Features

Three cards of equal height regardless of copy length

Code Prompt

Al-Saraya

Eight branches in Riyadh and Jeddah, delivering until midnight.

Privacy Terms

Full Footer

Link columns, a newsletter, and a copyright year computed rather than typed

Code Prompt

ARABIC FIRST

Ship your Arabic interface in an hour, not a week

Components that respect direction, type and numerals — copy the code or take the prompt.

Browse the library See an example

Hero Section

Headline, promise, two actions and one trust signal in a single visual order

Code Prompt

Trusted by 40+ institutions across the region

Client Logo Marquee

An endless strip that stops completely when motion is reduced

Code Prompt

Pick what fits your team

Pricing with Billing Toggle

The annual saving is computed from both prices, never hand-written

Code Prompt

Animated Stats Band

Numbers count up on entry — and appear complete when motion is reduced

Code Prompt

HOW IT WORKS

From first invoice to tax filing

Numbered Steps

A horizontal path whose connector stops at the last step instead of overshooting

Code Prompt

THE TEAM

Four people, one craft

Team Section

People cards with roles and links, on an equal-height grid

Code Prompt

REVIEWS

Testimonials Carousel

Auto-advances, and pauses on hover and on focus

Code Prompt

pk_live_4KdM82nQx7Ta

Copy Button with Confirmation

Actually copies, with a fallback when clipboard permission is unavailable

Code Prompt

Works with mouse, touch and the Space key

Hold-to-Delete

The delete completes after a sustained press and aborts on release

Code Prompt

Tab through — the tooltip also shows on focus

Icon Buttons with Tooltips

Each has an accessible name, and the tooltip shows on focus, not hover alone

Code Prompt

Try double-clicking — the request fires once

Async Loading Button

Blocks the double click and holds its width while pending

Code Prompt

Move the pointer near the button

Magnetic Button

Leans toward the pointer within range, and stops when motion is reduced

Code Prompt

Progress-in-Button

Progress lives inside the button, and the upload can be cancelled mid-flight

Code Prompt

Segmented Control

Single choice with a sliding indicator measured from the active segment

Code Prompt

Expanding Share Buttons

One button expands into options, with a counter that actually increments

Code Prompt

One primary per view — two cancel each other out

Base Buttons with States

Four levels of emphasis, five states each

Code Prompt

Split Button

The default action is one click; its alternatives sit behind an arrow

Code Prompt

Try typing 999 — it clamps to stock

Quantity Stepper

Respects stock and minimum, recomputing the line total instantly

Code Prompt

Notifications
Alert sound
Weekly digest

Toggle Switches

State announced to screen readers, with computed dependency between switches

Code Prompt

Dr. Rana

Family medicine · Al-Nakheel

Doctor Card with Slots

Booked ratio and open slots computed from the schedule

Code Prompt

Data Analysis Fundamentals

Career track · Level 2

Course Card with Progress

Percentage and time left derived from the lesson list

Code Prompt

Saraya Air · SR 553 Economy

AMM

Direct

DXB

Seat 14A

Flight Card

Duration computed from both times including the timezone offset

Code Prompt

Simplified tax invoice

INV-2481

Subtotal

Total

Invoice Card

Subtotal, VAT and total all computed from the line items

Code Prompt

Coffee brand identity

Media Card

Aspect ratio preserved, duration formatted from raw seconds

Code Prompt

#48210

Shawarma House

Order Card with Timeline

Progress derived from the current stage within the stage list

Code Prompt

Wireless noise-cancelling headphones

Product Card

The discount is computed from both prices, never hand-written

Code Prompt

Nour

Business Development Lead · Amman

Available

Employee Card

Tenure computed from the hire date

Code Prompt

New

Two-storey villa · Al-Yasmin

Per m²

Beds
Baths
m²

Property Card

Price per square metre derived from price and area

Code Prompt

Ratings Card

The average is computed from the star distribution, not stored

Code Prompt

SA-77410-3

Jeddah

Dammam

Shipment Card

Days left and delay computed from the dates themselves

Code Prompt

Q3 campaign team

Booked capacity

Team Card with Capacity

Overflow count and capacity load both computed

Code Prompt

Your cart

Subtotal

Shipping

Total

Cart with Free-shipping Threshold

The gap to free shipping is computed, never hand-written

Code Prompt

Checkout Steps

Three gated steps with the order summary always visible

Code Prompt

Try: SALE20 · FLAT50 · FREESHIP

Coupon with Three Discount Types

Percentage, fixed amount or free shipping — each with its own cap

Code Prompt

Card details

Card number

Expiry CVC

We never store your card — it passes encrypted to the payment gateway.

Card Input with Luhn Check

Validated with the Luhn algorithm; the network is inferred from its prefix

Code Prompt

Rasif Coffee

Subtotal

Total

Thanks for visiting

Receipt with Torn Edge

Sequential number, VAT and a verification code — shaped like a real receipt

Code Prompt

Request a refund

Reason

Refund Request with Computed Amount

The refunded amount computed after restocking and non-refundable shipping

Code Prompt

Choose shipping

Shipping with Computed Dates

Arrival computed in business days, skipping Friday and Saturday

Code Prompt

Order summary

Subtotal

Delivery
Total

Order Summary with VAT

VAT is rounded once at the total, not per line

Code Prompt

Order Tracking Timeline

A vertical trail with real timestamps; what is ahead is estimated, not asserted

Code Prompt

Buy together and save

Bundle Upsell with Computed Saving

The saving is computed from the price difference and updates with each pick

Code Prompt

RTL verified

EmployeeDept.Status

SSalma

TechActive

AAdham

FinanceActive

HHaya

MarketingLeave

WWaleed

OpsActive

Staff Table

Tables

Code Prompt

Four-level Alert Banners

Colour never carries the meaning alone — each level has an icon and a role

Code Prompt

Type-to-Confirm Delete

The button unlocks only when the resource name is typed exactly

Code Prompt

Your cart is empty

Add a product and it appears here with its price and estimated shipping before checkout.

First-run Empty State

A deliberate blank: explains the value and offers one step

Code Prompt

Could not load your balance

The connection to the bank did not succeed. Your data is safe and unchanged.

Error with Backoff Retry

The wait doubles with each attempt, and it is capped

Code Prompt

Inline Field Validation

An error bound to its field via aria-describedby, announced exactly once

Code Prompt

No property matches your search

No Results with an Exit

Shows the filters that narrowed the result and lets you drop them one by one

Code Prompt

Offline with a Queue

Holds what could not be sent and flushes it when the network returns

Code Prompt

Uploading files

Multi-file Progress

An overall percentage weighted by size, not by file count

Code Prompt

Loading Skeleton

Reserves the real content’s box so the page does not jump when it arrives

Code Prompt

Your booking is confirmed

Your boarding pass was emailed, and it is also under “My trips”.

Booking ref

Success with a Next Step

Does not stop at “done” — it gives the reference and what comes next

Code Prompt

Shift output

Semicircular Gauge

An arc whose angle comes from the ratio and whose length comes from the radius

Code Prompt

Portfolio — 10 sessions

Micro Candlestick

High, low, open and close on one computed scale

Code Prompt

Amman Tech Forum

0days 0hrs 0min 0sec

Countdown from a Real Interval

Computes the gap from a real date, so it never drifts

Code Prompt

Budget deviation — by item

Under Over

Deviation from Target

Bars that grow out of zero in both directions by the sign of the gap

Code Prompt

Conversion path — Spring campaign

Conversion Funnel

Each stage carries two ratios: from the previous stage and from the first

Code Prompt

Traffic by day and hour

Low High

Weekly Heatmap

Colour derived from the actual range — not from hardcoded thresholds

Code Prompt

★ Arabic-only

‹

Rajab 1447 January 2026

›

AATAKJS

282912345 6789101112 13141516171819

Hijri⇄ Gregorian

Hijri Date Picker

Hijri and Gregorian together, one tap to switch

Code Prompt

RTL verified

124Staff

98%Present

7Leave

HR Dashboard

Dashboard

Code Prompt

National ID / Iqama

1084215761 Citizen ✓

2084215769 Resident ✓

1084215762 Bad checksum ✕

Starts with 1 for citizens, 2 for residents · ten digits · last digit is a checksum

National ID / Iqama Field

Tells citizen from resident by the first digit, and validates the checksum

Code Prompt

◫Wafa Bank

Account and alerts

Click any link to make it current. Menus close on Escape and outside click.

Navbar with Account and Alerts

Two separate menus — opening one closes the other

Code Prompt

◇Nada Store

Announcement bar

Click any link to make it current. Menus close on Escape and outside click.

Navbar with Announcement Bar

A promo strip above with a real timer that stays dismissed

Code Prompt

▸ Ctrl K M

App bar

Click any link to make it current. Menus close on Escape and outside click.

Compact App Bar

The slimmest size, with a project switcher and a command key

Code Prompt

⬢Services Portal

Breadcrumb

Click any link to make it current. Menus close on Escape and outside click.

Navbar with Breadcrumb

A hierarchical trail whose separators mirror with direction

Code Prompt

◎Daw Studio

Centred logo

Click any link to make it current. Menus close on Escape and outside click.

Centred-Logo Navbar

Logo in the centre with links balanced on both sides

Code Prompt

◆Al-Saraya

Classic bar

Click any link to make it current. Menus close on Escape and outside click.

Classic Navbar

Logo, links and one action — the baseline that always works

Code Prompt

◈Lamsa

Mega menu

Click any link to make it current. Menus close on Escape and outside click.

Navbar with Mega Menu

A multi-column panel that closes on Escape and outside click

Code Prompt

⬤Falcons Club

Mobile sheet

Click any link to make it current. Menus close on Escape and outside click.

Mobile Navbar with Sheet

A hamburger that opens a full sheet and traps focus

Code Prompt

✚Shifa

Centre search

Click any link to make it current. Menus close on Escape and outside click.

Navbar with Centre Search

The search expands on focus without shifting the layout

Code Prompt

▤Al-Maydan

Scroll inside this box to see the bar shrink.

Shrinking Navbar

Starts tall, shrinks on scroll, and restores at the top

Code Prompt

◉Andalus University

Secondary tabs

Click any link to make it current. Menus close on Escape and outside click.

Navbar with Secondary Tabs

Two rows: identity above, tabs below with a sliding indicator

Code Prompt

✈Maha Travel

Scroll to see the bar fill

Transparent Navbar that Fills

Transparent over the hero, gains a background on scroll

Code Prompt

Infinite Scroll That Ends

An observer that fetches near the edge and stops with an announcement instead of spinning forever

Code Prompt

Load More with Honest Count

It announces what remains — not what loaded — and retires at the end instead of staying a dead button

Code Prompt

Windowed Pagination

A page-number window whose width never changes as the reader moves

Code Prompt

RTL verified

Pricing Card

Pricing

Code Prompt

Recent

Autocomplete Search

Suggests, navigates by arrows, and remembers your last searches

Code Prompt

Front-end developerAmman · Full time
Experience designerDubai · Remote
Senior accountantCairo · Full time
Project managerDoha · Contract
Marketing specialistAmman · Remote
Data engineerDubai · Remote

Search with Compound Filters

A term plus conditions — each filter shown as a chip you can remove

Code Prompt

The MuqaddimahIbn Khaldun
Kalila wa DimnaIbn al-Muqaffa‘
The DaysTaha Hussein
Season of Migration to the NorthTayeb Salih
Men in the SunGhassan Kanafani
Memory in the FleshAhlam Mosteghanemi

Typo-Tolerant Search

Finds the match despite a typo, and suggests “did you mean?”

Code Prompt

Within

Radius Search

Distance computed with haversine, not raw coordinate differences

Code Prompt

Ctrl K

Grouped Global Search

Results from several sources, each under its own heading

Code Prompt

Lamb kabsa48
Chicken mandi42
Arabic shawarma18
Lamb madhbi55
Fattoush salad16
Nabulsi knafeh22

Instant Search with Highlight

Filters as you type and highlights the match in the original text

Code Prompt

Paginated Search

Pages computed from the result count, resetting on every new query

Code Prompt

Price range

Toyota Camry 2024
Hyundai Tucson 2023
Lexus ES 2024
Kia Cerato 2023
Nissan Patrol 2024
Chery Tiggo 2023

Search with Price Range

Two handles that cannot cross, with results recomputed instantly

Code Prompt

Recent searches

Search with Recent History

Stores recent searches locally and offers them before you type

Code Prompt

Field-scoped Search

Restricts the query to one field instead of every field

Code Prompt

Ref	Description	Vendor	Amount
Visible total

In-table Search

Highlights inside cells, counts rows and sums only what is visible

Code Prompt

Enter adds · Backspace removes the last tag

Tag-based Search

Each tag is a condition — results are their intersection, not their union

Code Prompt

RTL verified

✓ ✓ 3 4

Company Branches Staff Activate

Uploading staff file

Setup Wizard

Progress follows reading order

Code Prompt

Support

Support desk

The counter changes every three seconds and is announced without interrupting.

Sidebar with Live Badges

Counters that change and announce themselves to screen readers

Code Prompt

Ufuq Co.

HR

Click any item to activate it. Arrow keys navigate.

Collapsible Sidebar

Folds into an icon rail and remembers your choice

Code Prompt

Nuha Projects Ctrl K

Project management

Click any item to activate it. Arrow keys navigate.

Sidebar with Command Palette

Ctrl+K opens a search that jumps anywhere by keyboard alone

Code Prompt

Delivery app

Focus stays inside the drawer and returns on close.

Saree

Mobile Drawer

Slides from the start edge and traps focus inside

Code Prompt

Al-Noor Clinics

Clinic
Medical

Medical clinic

Click any item to activate it. Arrow keys navigate.

Grouped Sidebar

Group headings separate sections without collapsing

Code Prompt

E-commerce

Click any item to activate it. Arrow keys navigate.

Icon Rail with Tooltips

As narrow as it gets — the label appears on hover and focus

Code Prompt

Books

Accounting

Click any item to activate it. Arrow keys navigate.

Nested Sidebar

Groups that expand and collapse — one open at a time

Code Prompt

Golden Bite

Pinned

All

Restaurant chain

Click any item to activate it. Arrow keys navigate.

Sidebar with Pinned Items

Pin what you use daily to the top — and it stays pinned

Code Prompt

Mada Agency

Marketing agency

Click any item to activate it. Arrow keys navigate.

Sidebar with User Menu

A menu that closes on outside click and on Escape

Code Prompt

Gulf Fleets

Logistics

Click any item to activate it. Arrow keys navigate.

Sidebar with Progress Meters

Each section carries a computed meter, announced to screen readers

Code Prompt

Real estate

Click any item to activate it. Arrow keys navigate.

Searchable Sidebar

Arabic-normalized search filters items instantly

Code Prompt

Courses

Learning platform

Click any item to activate it. Arrow keys navigate.

Split Rail with Context Panel

An icon column that swaps the contents of the panel beside it

Code Prompt

Design studio

Click any item to activate it. Arrow keys navigate.

Sidebar with Workspace Switcher

Switching the client swaps the whole navigation

Code Prompt

Pickup address

Building Postal Additional City

National Address Sign-up

Postal code, building number and additional number — each with its correct length

Code Prompt

Membership sign-up

Date of birth

Sign-up with Age Check

Age computed from the full date difference, not by subtracting years

Code Prompt

Register a business

Business name CR number VAT number

Business Sign-up with CR Number

Validates the commercial registration and the VAT number together

Code Prompt

Consents

Select all

Terms of use Required
Health data processing Required
Share results with my doctor Optional
Marketing messages Optional

Sign-up with Layered Consent

Required and optional consents, with a genuinely tri-state “select all”

Code Prompt

Donation account

Account holder IBAN

Bank Account Sign-up

IBAN verified with the full mod-97 checksum, not just its length

Code Prompt

Join your team

Invite code

Join by Team Invite

The invite code resolves both the team and the role

Code Prompt

Enter the code

Sent to +962 7X XXX 4821

Paste the whole code — it distributes itself

OTP Code Entry

Accepts a pasted code, moves back on delete, and re-sends on a timer

Code Prompt

New account

Email Password

Sign-up with Password Strength

Strength computed from variety and length together — not length alone

Code Prompt

Create your account

We send a verification code

Mobile number

Phone Sign-up

Accepts Saudi and Jordanian numbers and normalises the international form

Code Prompt

Start in a minute

Sign-up with Providers

Provider buttons, a divider and an email fallback — in correct focus order

Code Prompt

Your details

Name

Multi-step Sign-up

No step advances before the previous one is valid — progress is computed

Code Prompt

Choose your handle

Handle

Username with Live Availability

Checks after typing stops and suggests alternatives on collision

Code Prompt

Employees by department

Tech
Finance
Operations
HR
Sales

Ranked Bars

Sorts itself and scales each bar against the largest

Code Prompt

Payroll

Employees

Resignations

vs. previous quarter

Period Comparison

Current against previous — the delta computed both ways

Code Prompt

Employees

Payroll

Attendance

Pending requests

Stats Grid

Four numbers at a glance — every delta computed, not typed

Code Prompt

Live Counter

Animates between values smoothly and honours reduced motion

Code Prompt

of budget

Progress Ring

A share of a target — the ring’s circumference computed from its radius

Code Prompt

Requests this week

Stat with Sparkline

The curve is drawn from the data itself — not a static image

Code Prompt

RTL verified

Hi, how do I add a new employee?

From HR dashboard → Add employee

Thanks, found it ✓

Support Chat

Bubbles swap sides

Code Prompt

Compare plans

	Free	Pro	Enterprise

Comparison Table

Each feature row is a header, and the highlighted column is announced, not just coloured

Code Prompt

Density and Column Toggles

Three densities and hideable columns, with the choice remembered

Code Prompt

Inventory

Item	Qty	Unit price	Value
Stock value

Click a number to edit · Enter saves · Esc reverts

Inline Cell Editing

Saves on Enter, reverts on Escape, and recomputes immediately

Code Prompt

Orders

	Order	Customer	Status	Total

Table with Expandable Rows

Details open under their own row, correctly wired with aria

Code Prompt

Employee	ID	Department	Status	Salary
Visible total

Table with Combined Filters

Text search plus two selects — intersected, with a total that follows

Code Prompt

Entries by cost centre

Item	Date	Amount
Grand total

Grouped Table with Subtotals

Subtotals and the grand total computed from the rows, never typed

Code Prompt

Client invoices

Invoice	Client	Due	Status	Amount

Table that Becomes Cards

On narrow screens it becomes cards, each field carrying its own label

Code Prompt

Users

	User	Email	Role

Table with Bulk Selection

A genuinely tri-state “select all”, with actions that state their count

Code Prompt

Branch sales

Branch	Manager	Units	Revenue

Type-aware Sortable Table

Numbers compare numerically and Arabic by its own collation — never as plain text

Code Prompt

Shipping rates by weight

Scroll both ways

Sticky Header and First Column

Header sticks vertically, first column horizontally, and the corner above both

Code Prompt

RTL verified

✓Changes saved

!Plan expires in 3 days

✕Upload failed

Toasts

Slide from the correct side

Code Prompt

★ Arabic-only

Tax Invoice INV-2047

Annual plan1,200

Setup & training400

Subtotal1,600

VAT 15%240

Total1,840 SAR

Tax Invoice

Arabic tax-invoice layout with line items and 15% VAT

Code Prompt

The difference a screenshot cannot show

Designed in Arabic ≠ translated to Arabic

Six failures that recur in every interface translated after it was built. Not language bugs — system bugs: physical properties instead of logical ones, and a Latin type scale forced onto letters that do not fit it.

Case Translated later Arabic-first

Currency and marketDigits are Western in both languages. Only the currency moves — the symbol precedes the number in English and follows it in Arabic.

One market

$1,234.50

A dollar sign in an Arabic interface, or SAR appended to the number — one market imposed on everyone.

Three markets

SAR 1,234.50Saudi Arabia

JOD 1,234.500Jordan — three decimals

$1,234.50English

DateThe American order is ambiguous to an Arabic reader, and the Hijri date is a requirement, not decoration.

Ambiguous

08/21/2026

Month/day/year — is it 21 August or 8 September?

Hijri + Gregorian

21 August 2026

8 Rabi‘ al-Awwal 1448 AH

Direction of motionAn arrow is a directional symbol. In RTL, “next” is to the left — and the arrow flips with it.

Does not flip

Points against the reading direction

Flips

Flips with the direction

The sidebarThe difference is one line: margin-left is fixed, andmargin-inline-start flips.

Physical properties

Stays on the left although the page reads right to left

Logical properties

Moves to the start edge

Line heightDots, hamzas and maddas need more vertical room than Latin does: +0.18.

Cramped

Build a tested Arabic design system — not a Latin interface flipped over and dressed in Arabic letters.

+0.18

Build a tested Arabic design system — not a Latin interface flipped over and dressed in Arabic letters.

Name fieldsThe four-part name is an official requirement in the Gulf — it does not compress into two fields.

Two fields

First nameFamily name

Two fields — they cannot hold an official name

Four parts

Given nameFatherGrandfatherFamily

Four fields — matching the ID document

If it is not verified, it is not approved

The quality standard — in numbers

Every number here is computed from the library itself on each build, never written by hand. Add a component and the count changes; break a rule and the build fails before the claim reaches this page.

Mandatory gate 82checks

Contrast fails the build

Every colour pair in the palette is measured in dark and light against WCAG 2.1 AA. One failed check stops the release — the design is not shipped …

Machine-checked 0

Zero physical properties

margin-left does not flip with the direction, andmargin-inline-start flips. …

193/193

Every component in two languages

No component carries text in one language only. Press AR / English at the top …

Zero dependencies

HTML and CSS only. No framework, no library, no font from a delivery network. You copy the component …

2Two themes

Dark and light

Every colour is defined in both themes and its contrast checked in both. Light is not an automatic …

★ Arabic only 20components

built for Arabic alone

A Hijri calendar, a four-part name, national ID and residency with a check-digit validation, and an Arabic tax invoice. …

Why does this matter? “High quality” is a phrase every site writes. The difference is that these numbers can be verified: … npm run contrast and watch them measured in front of you, then run npm run audit which reads 193 components and 11,948 lines and recomputes. And if one of us broke a rule, …

We build for you — not sell you a template

Have us build your site

The site you are standing on is the sample. No portfolio screenshots, no promises — what you see is what we build, and the 193 components below are its raw material.

Request a quote Reply within one business day · no commitment

193ready components

82contrast checks gating the build

0properties breaking RTL

2verified modes

You write What the business is, who the site is for, and what a visitor should do.

We reply with a quote A clear scope, timeline and price. No open-ended hours, no elastic clauses.

We build on the system The same components you see here — verified in Arabic and English, in both modes.

You get the code The site and its code are yours. No subscription, no dependence on us to run it.

Fully open

Free today

Everything in the library is available today — components, prompts and code. Take it and build: no account, no password, no card.

Pricing is announced when payment opens. We ask for your email once, at your first copy — nothing more.

Ready systems — company & HR management

Systems already running with clients — installed, with training for your team. Not a one-click purchase: priced by organisation size and seat count.

Request a quote

Copy your first component in a minute

No account, no install, no dependencies. Open the library, pick a component, copy the code — or take the prompt and hand it to your AI.

Browse the library See a full prompt