JumboRTL

JumboRTL enables right-to-left (RTL) layout by integrating stylis-plugin-rtl with MUI's Emotion cache. When the current locale is ar-SA, the root layout sets dir="rtl" on the <html> element and wraps the app tree in JumboRTL, which mirrors all CSS direction properties automatically.

How it works

The root layout checks the [lang] param and passes the direction to both the <html> element and the JumboTheme component:

tsx

// src/app/[lang]/layout.tsx (excerpt)
export default async function RootLayout({ children, params }) {
  const { lang } = await params;
  const isRTL = lang === 'ar-SA';
 
  return (
    <html lang={lang} dir={isRTL ? 'rtl' : 'ltr'}>
      <body>
        <AppRouterCacheProvider>
          <JumboTheme init={createJumboTheme(mainTheme, headerTheme, sidebarTheme, footerTheme, isRTL ? 'rtl' : 'ltr')}>
            <JumboRTL>
              {children}
            </JumboRTL>
          </JumboTheme>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

JumboRTL props

Prop	Type	Default	Description
`children`	`ReactNode`	required	Application tree

JumboRTL reads the current text direction from the MUI theme and conditionally injects the stylis-plugin-rtl plugin into the Emotion style cache. No additional props are needed.

stylis-plugin-rtl behavior

The RTL plugin intercepts Emotion-generated CSS and transforms directional properties:

Original property	RTL transformation
`padding-left: 16px`	`padding-right: 16px`
`margin-right: 8px`	`margin-left: 8px`
`text-align: left`	`text-align: right`
`border-left: ...`	`border-right: ...`
`float: left`	`float: right`
`left: 0`	`right: 0`

This means all MUI components, sx props, and Emotion styled components are mirrored automatically with no per-component RTL code required.

Supported RTL locale

The only locale that activates RTL is ar-SA (Arabic — Saudi Arabia). All other locales render in the default LTR direction.

typescript

// src/proxy/locale.ts
const locales = ['en-US', 'ar-SA', 'es-ES', 'fr-FR', 'it-IT', 'zh-CN'];

Visiting the RTL layout

To test the Arabic RTL layout, navigate to a route prefixed with /ar-SA/:

http://localhost:3000/ar-SA/dashboards/misc

The proxy will serve that locale without a redirect because ar-SA is in the supported locales list. The <html dir="rtl"> attribute and RTL CSS transforms activate automatically.

RTL-compatible custom components

When writing custom components with hardcoded directional styles (e.g. paddingLeft, left), prefer MUI's sx prop over inline styles. The sx prop is processed through Emotion and therefore transformed by JumboRTL. Inline styles in style={{ }} are not transformed.

Adding RTL to a new locale

If you add a new RTL locale, update the direction detection in src/app/[lang]/layout.tsx:

typescript

const RTL_LOCALES = ['ar-SA'];  // add your new locale here
const isRTL = RTL_LOCALES.includes(lang);