Docs

Getting started with Kanz

How the components install, how the tokens map from Figma to code, and the rules every component follows in right-to-left.

Getting started

Kanz ships three ways from one source: the components on this site as live previews, the Figma file for designers, and the React source for developers. Start with the component you need on /ui, switch its preview to Arabic, and read its RTL notes before anything else.

Components ›

Installation

Kanz installs through shadcn's CLI as source you own. Registry access opens at launch; these are the commands it will use.

1. Set up the theme once Soon

npx shadcn@latest init https://ritla.app/r/style.json

2. Register the @ritla namespace in components.json

components.json

{
  "registries": {
    "@ritla": "https://ritla.app/r/{name}.json"
  }
}

3. Add components

npx shadcn@latest add @ritla/phone-input @ritla/card-details @ritla/button

Tokens

A utility is the Figma variable's path without its top-level group, so a designer and a developer say the same name.

Figma variable	CSS variable	Tailwind utility
`background/surface/lowest`	`--kanz-background-surface-lowest`	`bg-surface-lowest`
`text/gray/txt-primary`	`--kanz-text-gray-txt-primary`	`text-gray-txt-primary`
`border/gray/soft`	`--kanz-border-gray-soft`	`border-gray-soft`
`space-16`	`--kanz-space-16`	`p-16, gap-16, ms-16`
`radius/8`	`--kanz-radius-8`	`rounded-8, rounded-s-8`
`body-14`	`--kanz-…`	`text-body-14`

RTL principles

Logical properties only: ms, me, ps, pe, start, end, text-start. A physical direction class is a bug.
Arrows, chevrons, navigation, progress, sliders and breadcrumbs mirror.
Media controls, clocks, checkmarks, logos, numeric chart axes, phone numbers and code never mirror.
Western and Arabic-Indic digits are both supported and set once, in the provider.
Arabic never falls back to a Latin font, and Arabic text is never letter-spaced.
Text that can arrive in either language gets dir="auto"; phone numbers, codes and IDs are isolated left-to-right.