Build · New
Arabic UI that is right by default
React and Tailwind v4 components built against the same checks Ritla runs on your site. Each one ships in English, mirrored and native Arabic, from the tokens behind the Kanz Figma theme.
- Components
- 62
- Preview modes
- EN · mirrored · AR
- Install
- Soon
Payments and fintech
- Trade ActionBuy and Sell side by side, for trading and brokerage screens. Both are primary actions: green Buy at the inline start, red Sell after it, and the colors never swap in Arabic.In RTL: Buy at the inline start, colors never swap
- Card DetailsCard number, expiry and security code as one group, formatted as you type and filled by browsers and wallets.In RTL: group always LTR; part names in the page language
- Phone InputA phone number field with a country picker behind the flag (searchable in Arabic and English, with calling codes), formatting the number as you type. It gives the number in international format (E.164).In RTL: row always LTR; list in the page language and direction
- Verification CodeOne-time code boxes, 4 to 6. Typing moves to the next box, paste fills them all, and phones offer the code from the SMS.In RTL: boxes always LTR; Arabic digits stored as 0-9
- Number InputA number field with minus / plus steppers and an optional currency prefix. It writes the value in the page's numerals (123 or ١٢٣) and accepts either when typed.In RTL: number LTR, start-aligned; page numerals
- Payment ButtonsApple Pay and Google Pay buttons as Apple and Google supply them, from their official libraries: the mark, wording and translation are theirs; Kanz sets the height, width, shape and language.In RTL: marks never mirror or translate; wording in the page language from Apple / Google
Inputs, select and search
- Input FieldA text field with a visible label and helper text, with the states every Kanz field shares: enabled, hover, focus, error, disabled, read-only and auto-fill.In RTL: row mirrors;
dir="ltr"keeps an LTR row;dir="auto"text - Password InputA password field with a show / hide toggle, and an optional strength meter for new passwords.In RTL: meter fills from the inline start; words in the page language
- Text AreaMulti-line text for longer answers such as notes, descriptions and messages, with Input Field's label, helper text and states, a character counter and a resize handle.In RTL: counter and grip at the inline end, grip mirrored;
dir="auto"text - SelectA field to pick one option, or several, from a list, with Input Field's label and states, and search when the list is long. Use it for 5 or more options; for fewer, radio buttons or checkboxes.In RTL: caret and row parts swap sides; list in the page direction and language
- Search FieldA search field with the magnifier, a clear button once there is text and a loading spinner, with optional suggestions as you type. Boxed in pages and forms, underlined in toolbars and lists.In RTL: magnifier / clear swap sides;
dir="auto"query, placeholder follows the page - Search BarSearch in an app header: a 56px rounded bar with the menu button, the search input and up to two actions or an avatar.In RTL: slots swap sides; back arrow mirrors
Selection
- CheckboxFor choosing any number of options, or turning one setting on before submitting. The box sits at the inline start, and the label toggles it too.In RTL: box at the inline start; check / dash never mirror
- Checkbox GroupCheckboxes under one label, with shared helper or error text, and an optional “select all” that turns indeterminate when only some are checked.In RTL: boxes at the inline start
- Checkbox CardA list row chosen with a checkbox, with an icon or picture at the start, a headline and supporting text. The whole row is clickable.In RTL: icon at the start, box at the end
- Radio GroupFor choosing exactly one option from a short list that's all in view; picking one clears the others. The circle sits at the inline start.In RTL: circles at the inline start; arrows follow reading order
- Radio CardA list row chosen with a radio in a group, with an icon at the start, a headline, supporting text and trailing text such as a price. The whole row is clickable.In RTL: icon at the start, circle at the end
- SwitchTurns a single setting on or off, and the change applies immediately. The knob sits at the inline start when Off and moves to the inline end when On.In RTL: switch at the inline start, knob moves to the inline end when On
- Switch CardA settings row turned on or off with a switch, with an icon at the start, a headline and supporting text. The whole row is clickable.In RTL: icon at the start, switch at the end
- ToggleA switch with a title and a description for settings rows, in two sizes. The change applies immediately.In RTL: switch at the inline start, knob moves to the inline end when On
- ChipSmall interactive elements: they suggest, act as shortcuts, filter, hold entered values or work as multi-select options.In RTL: leading at the start, caret / remove at the end
- SliderPick a value or a range by dragging or with the keyboard, when the feel matters more than the exact number: volume, zoom, a price range.In RTL: fills from the inline start, ArrowLeft increases in RTL; vertical from the bottom
Feedback and overlays
- AlertA message in the page, next to what it's about, that stays until the situation changes or the person dismisses it: a failed payment, an expiring ID, a finished import.In RTL: icon and text right, dismiss left, icons not mirrored
- ToastConfirms what just happened without stopping anyone. Add one action, like Undo or Retry, and it becomes a snackbar.In RTL: icon and message right, action and dismiss left; bottom left on larger screens; each toast takes its origin's dir / lang
- TooltipExplains an icon or a term in a few words when people hover it or focus it with the keyboard.In RTL: logical sides mirror; the bubble keeps the page dir / lang
- PopoverA small surface for one quick task, opened next to the control that asked for it.In RTL: Start / End and the arrow follow reading direction, close on the left in Arabic, links LTR
- Hover CardA read-only preview of what a link points to, shown while the pointer rests on it or it has focus.In RTL: avatar on the right in Arabic, handle LTR, icons unmirrored
- DialogStops the flow to confirm an action, warn about a risk or collect a short input. It sits on a dimmed overlay and keeps focus until it closes.In RTL: text right, close top left, confirm on the left; carries the island's dir / lang into the portal
- DrawerA panel that slides up from the bottom of a phone screen for a short task or a list of actions, within thumb reach, with the page still visible behind it. Also known as a bottom sheet.In RTL: title right, close and primary left; vertical motion unchanged; carries the island's dir / lang into the portal
- ProgressShows how much of a task is done: uploads, goals and multi-step flows. Use it when progress can be measured; use Spinner when it can't.In RTL: fills from the inline start; the circle doesn't mirror
- SpinnerTells people something is happening when you can't say how long it will take. Loading indicator adds a title and a short description.In RTL: never mirrors; dots bounce in reading order
- SkeletonShows the shape of content while it loads, so the page doesn't jump when the real content arrives.In RTL: the wave runs in the reading direction; shapes follow the layout
- Empty StateFills a region that has no content yet, says why, and points to the next step.In RTL: centered text, primary first on the right, illustrations unmirrored
Data display
- TableRows of records people compare and act on: transactions, orders, users. A real table with column headers and cells.In RTL: first column on the right; amounts left to right; dividers at the inline end
- ListRows of people, messages or settings: a headline with an overline and supporting text, an avatar or icon at the start, a tag at the end. The swipeable row reveals actions when swiped.In RTL: leading element on the right; swipe follows the reading direction (start actions on the right)
- AccordionQuestions that open to show their answers, so long help and settings pages stay short. People open only what they need.In RTL: text right, icon on the left; Start puts it on the right
- CollapsibleOne panel that shows or hides optional detail under its title, such as fees. The most useful line stays visible; the rest opens under it.In RTL: caret at the inline end (left)
- TagLabels something with a status or category (Paid, Pending, Overdue). Not interactive: never make it look clickable.In RTL: icons and flag at the inline start / end
- BadgeA count (unread messages, pending approvals) or a dot for something new, inside tabs, navigation items, menus and rows. For status words, use a Tag.In RTL: follows its place in the row; the count isolated LTR
- AvatarRepresents a person or account with a photo, initials or a generic placeholder, and can carry a badge for edit, verified or online.In RTL: badge at the bottom inline-end corner; one Arabic letter for Arabic names
- Keyboard KeyShows a key or a shortcut next to the command it runs, in menus, tooltips and help text.In RTL: a shortcut stays left to right inside Arabic
Get early access
Components, themes, blocks and the registry open together. Leave an address and we will write once, when they do.