Metronic React
Getting Started

RTL Support

How to use Right-to-Left (RTL) language support in Metronic React.

Metronic React provides built-in Right-to-Left (RTL) language support through the i18n provider system. For details on the provider implementation, see the Providers guide.

Checking RTL Status

import { useLanguage } from '@/providers/i18n-provider';
 
function RTLAwareComponent() {
  const { isRTL } = useLanguage();
 
  return (
    <div className={isRTL() ? 'rtl-specific-class' : 'ltr-specific-class'}>
      <p>This component adapts to the text direction</p>
    </div>
  );
}

Using Tailwind RTL Variant

The simplest way to adapt components for RTL support:

function CardWithIcon() {
  return (
    <div className="flex items-center p-4 bg-card">
      <div className="mr-4 rtl:mr-0 rtl:ml-4">
        <UserIcon className="h-6 w-6" />
      </div>
      <div className="text-left rtl:text-right">
        <h3 className="font-medium">User Profile</h3>
        <p className="text-muted-foreground">Manage your account</p>
      </div>
    </div>
  );
}

Form Components

function RTLAwareSearchInput() {
  return (
    <div className="relative">
      <input
        type="text"
        placeholder="Search..."
        className="pl-10 rtl:pl-4 rtl:pr-10 rounded-md border border-input bg-background"
      />
      <SearchIcon className="absolute left-3 rtl:left-auto rtl:right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
    </div>
  );
}

Layout Adjustments

function RTLAwareSidebar() {
  return (
    <div className="flex">
      <div className="w-64 border-r rtl:border-r-0 rtl:border-l border-border">
        {/* Sidebar content */}
      </div>
      <div className="flex-1 pl-6 rtl:pl-0 rtl:pr-6">
        {/* Main content */}
      </div>
    </div>
  );
}

Handling Icons in RTL

Some icons need to be flipped in RTL mode:

function DirectionalIcon() {
  const { isRTL } = useLanguage();
 
  return (
    <button className="flex items-center">
      {isRTL() ? (
        <ArrowLeftIcon className="h-4 w-4 mr-2 rtl:mr-0 rtl:ml-2" />
      ) : (
        <ArrowRightIcon className="h-4 w-4 mr-2 rtl:mr-0 rtl:ml-2" />
      )}
      Next Page
    </button>
  );
}

Using CSS Logical Properties

For custom CSS properties, use logical properties for better RTL support:

// In your CSS or CSS-in-JS
const styles = {
  container: {
    paddingInlineStart: '1rem',
    marginInlineEnd: '0.5rem',
    textAlign: 'start'
  }
};

Combining RTL with Dark Mode

function CardWithDarkMode() {
  return (
    <div className="bg-white dark:bg-slate-800 p-4 rounded-md shadow-md border-l-4 rtl:border-l-0 rtl:border-r-4 border-primary">
      <h3 className="font-medium text-slate-900 dark:text-slate-100 text-left rtl:text-right">
        Adaptive Component
      </h3>
      <p className="text-slate-600 dark:text-slate-300 text-left rtl:text-right">
        Supports both dark mode and RTL direction.
      </p>
    </div>
  );
}

Language Selector with RTL Support

function LanguageSelector() {
  const { changeLanguage, currenLanguage, I18N_LANGUAGES } = useLanguage();
 
  return (
    <select
      value={currenLanguage.code}
      onChange={(e) => {
        const lang = I18N_LANGUAGES.find(l => l.code === e.target.value);
        if (lang) changeLanguage(lang);
      }}
      className="border border-input bg-background p-2 rounded-md"
    >
      {I18N_LANGUAGES.map((lang) => (
        <option key={lang.code} value={lang.code}>
          {lang.label}
        </option>
      ))}
    </select>
  );
}

Testing RTL Mode

To quickly test RTL functionality during development:

function RTLTester() {
  const { isRTL, changeLanguage, I18N_LANGUAGES } = useLanguage();
  const rtlLanguage = I18N_LANGUAGES.find(lang => lang.direction === 'rtl');
  const ltrLanguage = I18N_LANGUAGES.find(lang => lang.direction === 'ltr');
 
  return (
    <button
      onClick={() => changeLanguage(isRTL() ? ltrLanguage : rtlLanguage)}
      className="px-4 py-2 bg-primary text-white rounded-md"
    >
      Toggle RTL: {isRTL() ? 'ON' : 'OFF'}
    </button>
  );
}
PreviousInternationalizationNextDark Mode