BidiKit makes your React and Next.js app automatically mirror itself for Arabic, Hebrew, Persian, and Urdu — layouts, icons, spacing, and all.
Switch the language above. Every component below automatically adapts — no code changes needed.
The navbar automatically reverses order in RTL — logo moves to the right, user account to the left, navigation links maintain correct reading order.
Switch to Arabic above and watch all of these activate instantly:
All variants are live. Click them — they all control the same language state.
<LanguageSwitcher />variant="dropdown" display="flag+native"variant="minimal" display="flag+code"<LanguageSwitcherRoot>In React: import { LanguageSwitcher, LanguageSwitcherRoot } from @bidikit/react
Sets document.dir, html lang, CSS variables, and class names the moment you call setLanguage().
Nested keys, interpolation, pluralization, fallback languages, and lazy loading built in.
Arrows, chevrons, and back icons automatically flip. Hearts and stars stay put.
ms-, me-, ps-, pe-, rounded-s, border-e, text-start — write once, both directions.
Middleware, server provider, generateBidiMetadata — correct lang and dir before first paint.
npx @bidikit/cli init — scaffold translations, sync missing keys, lint, extract from source.
<LanguageSwitcher /> drop-in pill, dropdown, or minimal. Or use LanguageSwitcherRoot for a fully custom design.