RTL Support
BoardUI fully supports RTL for Arabic, Hebrew, and other right-to-left languages across free components, Pro blocks, and templates.
Component examples
Switch languages and try the controls. Layout, text alignment, spacing, navigation arrows, slider behavior, and overlay placement follow the selected direction. The examples include a Pro chart card.
Template examples
Explore the actual templates with Arabic, Hebrew, and English sample content. Switch languages to see the copy, layout, and interactions together.
Set up RTL
Install the Direction Provider, then set your application’s language and direction. No RTL CLI flag or separate component version is needed.
npx boardui@latest add directionapp/layout.tsx
import { DirectionProvider } from "@/components/foundations/direction/direction";import "@/styles/globals.css";
export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="ar" dir="rtl"> <body> <DirectionProvider locale="ar">{children}</DirectionProvider> </body> </html> );}locale="ar" resolves to RTL. Use he for Hebrew, en-US for English, or zh-CN for Chinese, which remains LTR. Setting dir alone updates CSS; the provider also configures React Aria keyboard navigation, calendars, and portalled menus.
Mixed-language regions
// Works in Next.js, Vite, React Router, and other React apps.<DirectionProvider locale="he"> <AccountSettings /></DirectionProvider>
// Providers can be nested for a region in another language.<DirectionProvider locale="ar"> <Dashboard /> <DirectionProvider locale="en-US"> <EnglishSupportPanel /> </DirectionProvider></DirectionProvider>Existing projects
BoardUI installs source into your project. Add the provider, then refresh components installed before RTL support. Back up your customizations before using --overwrite, or merge the current source into your edited files. Refresh shared dependencies such as buttons, menu styles, icons, and global CSS as well as your template.
npx boardui@latest add button select tabs --overwritePro components and templates use the same provider and logical styles. Install updates through your licensed CLI, or download the updated source package. Your application can switch locale at runtime without reinstalling components.
Directional styles
Use ps / pe, ms / me, start / end, and text-start / text-end in custom layouts. Flex and grid follow the region’s direction automatically. Navigation glyphs use rtl:rotate-180; icons passed to BoardUI buttons are mirrored when they are navigation arrows.
Keep email addresses, URLs, OTP digits, and source code in their natural LTR order. Use inputDir to control a field’s value independently of its label, and bdi to isolate mixed text. Chart axes and data retain their coordinate order; their card layout and controls follow RTL.
Mixed content
<Input label="البريد الإلكتروني" type="email" /> // value defaults to LTR<Input label="الاسم" inputDir="auto" />
<p>تم إرسال رسالة إلى <bdi>sara@example.com</bdi></p><pre dir="ltr"><code>npm run build</code></pre>BoardUI overlays preserve their locale. When you write a custom portal, carry direction onto its root so it can render correctly outside the original DOM region.
Custom portals
import { createPortal } from "react-dom";import { useDirection } from "@/components/foundations/direction/direction";
function CustomOverlay() { const direction = useDirection(); return createPortal(<div dir={direction}>…</div>, document.body);}Notification stacks default to bottom-end. Use top-start, top-end, or bottom-start for logical corners. Explicit left and right positions retain their physical meaning.
Localization & fonts
RTL support handles layout and interactions. The examples above include Arabic and Hebrew sample translations. Your application labels, accessible names, currencies, and messages belong to your translation layer. React Aria supplies locale-aware interaction strings; use Intl.NumberFormat and Intl.DateTimeFormat for application data.
Choose a font with coverage for your language, such as Noto Sans Arabic or Noto Sans Hebrew. Load it with your framework’s font tools and add it to BoardUI’s --font-sans stack. Arabic text needs connected shaping and comfortable line height; avoid extra letter spacing. Chinese uses the same locale foundation with an LTR layout.
The approach follows the logical-style principle used by shadcn/ui and uses React Aria’s locale provider for BoardUI’s existing interaction primitives.