Theming
RTL

RTL Support

Ledger UI supports right-to-left (RTL) layouts for Arabic, Hebrew, Farsi, and other RTL languages through the @gtcx/i18n package and Ant Design's ConfigProvider.

Enabling RTL

import { GtcxConfigProvider } from '@gtcx/theme';
 
function App() {
  return (
    <GtcxConfigProvider direction="rtl">
      {/* All components render in RTL mode */}
    </GtcxConfigProvider>
  );
}

How It Works

  • Ant Design ConfigProvider handles component-level RTL (form inputs, buttons, menus, tables)
  • CSS logical properties (margin-inline-start, padding-inline-end) are used in layout components for automatic mirroring
  • MetronicLayout sidebar position and content margin flip automatically

i18n Integration

The @gtcx/i18n package includes RTL utilities:

import { createTranslationEngine } from '@gtcx/i18n';
 
const i18n = createTranslationEngine({
  defaultLocale: 'ar',       // Arabic
  fallbackLocale: 'en',
});
 
// Direction is determined by locale
const isRtl = i18n.isRtl('ar'); // true

Supported RTL Languages

The i18n engine supports 29 languages including these RTL languages:

  • Arabic (ar)
  • Hebrew (he)
  • Farsi/Persian (fa)
  • Urdu (ur)

Testing RTL

The Storybook includes RTL variants for layout stories. Use the direction control in Storybook to toggle RTL rendering for any component.

Dark ModeTokens