Migration
Every name that changed when Ritla UI moved beside Tailwind's defaults: --ritla-* variables, RitlaProvider, the space- spacing, the elevation- shadows and the theme-dark: and dir-rtl: variants.
Ritla UI now installs beside Tailwind's defaults instead of replacing them, so it works in existing apps. The same change renamed the identifiers in installed code that still began with kanz. This page lists every rename.
These names changed before Ritla UI's first public release (2026-10-28). An install from before that date follows the tables below. A fresh install has nothing to do: it gets the new names from the start (Installation).
The tables are for anyone holding code written before the change: a copy from a preview, or our own sites and examples, which moved with the same list.
What changed, in one paragraph#
The theme used to remove Tailwind's palette and scales, add global base styles (the font family, no letter spacing in Arabic, the focus ring, a default transition), and redefine dark:, rtl: and ltr:. Now it removes nothing, adds no base styles and leaves those variants to Tailwind. Where its names met Tailwind's, its own took a group of their own (space-, elevation-, container-), and its variants took new names (theme-dark:, dir-rtl:, dir-ltr:). The old behavior is still there, opt-in, as strict mode.
CSS variables#
Every variable keeps its name after the prefix:
| Before | After |
|---|---|
--kanz-* | --ritla-* |
var(--kanz-radius-8) | var(--ritla-radius-8) |
--kanz-font-geist, --kanz-font-ibm-plex-sans-arabic (the font hooks you point next/font at) | --ritla-font-geist, --ritla-font-ibm-plex-sans-arabic |
keyframes kanz-skeleton-pulse, kanz-skeleton-wave | ritla-skeleton-pulse, ritla-skeleton-wave |
Components and hooks#
| Before | After |
|---|---|
KanzProvider | RitlaProvider |
useKanz | useRitla |
Any other export that starts with Kanz, such as KanzProviderProps or KanzIconProps | The same name starting with Ritla |
kanz-* class names and data-kanz-* attributes | ritla-* and data-ritla-* |
There are no aliases: the old names are gone, not deprecated.
Three names keep their spelling: KanzLogo, KanzLogomark and kanzLogoArt draw the demo bank's mark, so they are not renamed.
Spacing#
Every utility that reads the spacing scale takes space- before the step. The number is unchanged, and it is still the size in pixels:
| Before | After |
|---|---|
p-16, px-12, ps-8 | p-space-16, px-space-12, ps-space-8 |
gap-8, space-y-4 | gap-space-8, space-y-space-4 |
m-24, -mt-4, me-2 | m-space-24, -mt-space-4, me-space-2 |
size-24, w-40, min-h-48, max-w-320 | size-space-24, w-space-40, min-h-space-48, max-w-space-320 |
top-4, inset-8, translate-x-4, scroll-m-8 | top-space-4, inset-space-8, translate-x-space-4, scroll-m-space-8 |
Zero, px, fractions such as w-1/2, full, auto, screen and arbitrary values are not steps, and stay as they are.
A class you miss does not fail, it changes size. p-16 now reaches Tailwind's own scale, where it is 4rem rather than 16px. Search for every spacing utility with a bare number before you ship.
Names Tailwind also uses#
| Before | After |
|---|---|
shadow-xs, shadow-sm, shadow-md, shadow-lg, shadow-xl | shadow-elevation-xs, shadow-elevation-sm, shadow-elevation-md, shadow-elevation-lg, shadow-elevation-xl |
shadow-xs-raised | shadow-elevation-xs-raised |
backdrop-blur-sm, -md, -lg, -xl, and blur-* with the same steps | backdrop-blur-elevation-sm, -md, -lg, -xl, and blur-elevation-* |
max-w-xs to max-w-xl, and w-, min-w- with the same sizes | max-w-container-xs to max-w-container-xl, and w-container-*, min-w-container-* |
container query variants @xs: to @xl: | @container-xs: to @container-xl: |
font-body, font-display, font-numeric | font-family-body, font-family-display, font-family-numeric |
max-w-container-sm is not max-w-component-sm: the first is a container width, the second a component width, and their values differ.
The font utilities took family- because apps often define --font-body or --font-display in their own @theme, which would replace Ritla UI's family. Colors, type styles, line heights, letter spacing, radii and layers needed no rename: Tailwind defines none of the theme's names for them.
Variants#
| Before | After |
|---|---|
dark: | theme-dark: |
rtl: | dir-rtl: |
ltr: | dir-ltr: |
The new variants keep the old meaning. theme-dark: follows the dark switch you chose in npx ritla init (Dark mode). dir-rtl: and dir-ltr: match the nearest dir attribute, so an English island inside an Arabic page stays left to right; Tailwind's rtl: matches any ancestor.
Base styles#
The theme no longer sets anything globally. Three things it used to set now come from strict mode or from a class:
| Before, global | Now |
|---|---|
| The font family on every element, and no letter spacing in Arabic | font-family-body on the element, which follows the nearest lang |
| The theme's focus ring on every focused element | focus-visible:focus-ring |
A bare transition at the theme's duration and easing | transition duration-fast ease-standard; a bare transition is Tailwind's 150ms ease again |
For the font, on the root:
<body class="font-family-body">Or add strict mode, which keeps all three global.
Fonts can now come from your app: set --ritla-font-sans and its siblings, or run npx ritla init --font app (Fonts).
Strict mode used to set letter spacing to zero on Arabic text everywhere. Without it, a letter spacing your app sets at the root reaches Arabic text inside the components too. Keep it at zero for Arabic in your own styles, or turn on strict mode.
Moving a project#
- Take the new theme and the renamed components:
npx ritla update. Files you have not edited take the new names. The theme moves fromlib/kanz/tolib/ritla/: old copies you have not edited are deleted with their@importlines, and copies you edited are kept, reported and no longer imported. - Rename the rest by hand with the tables above. Search your code for
--kanz-,Kanz,kanz-,dark:,rtl:,ltr:,shadow-,blur-,max-w-, a baretransition, and every spacing utility with a bare number. - Check your pages in both directions and both modes. A missed spacing class shows up as a size change, not as an error.