Metronic NextJS
Getting Started

RTL Support

Implement and use Right-to-Left (RTL) text direction in Metronic Next.js

RTL Support

Metronic Next.js includes built-in support for Right-to-Left (RTL) languages like Arabic and Hebrew. This guide explains how to use and configure RTL features in your application.

Overview

The RTL support system consists of these key components:

  1. I18nProvider: Sets document direction based on language preference
  2. RadixDirectionProvider: Propagates direction context to UI components
  3. Language Configuration: Defines direction for each supported language
  4. CSS Logical Properties: Used for direction-aware styling

How RTL Works

When a user selects an RTL language like Arabic, several changes occur automatically:

  1. The dir attribute on the HTML document is set to rtl
  2. Radix UI components adjust their alignment and direction
  3. Tailwind's logical properties (start/end instead of left/right) respond accordingly
  4. Text alignment and flow direction are reversed

Configuring Languages

To add RTL language support, define it in the language configuration:

// In your code that uses language configuration
const languages = [
  {
    code: 'en',
    name: 'English',
    direction: 'ltr',
    // Other properties...
  },
  {
    code: 'ar',
    name: 'Arabic',
    direction: 'rtl',
    // Other properties...
  }
];

Switching to RTL Languages

Use the language selector component to switch between RTL and LTR languages:

'use client';
 
import { useLanguage } from '@/providers/i18n-provider';
 
function LanguageSwitcher() {
  const { languageCode, changeLanguage } = useLanguage();
 
  return (
    <div>
      <button onClick={() => changeLanguage('en')}>
        English (LTR)
      </button>
      <button onClick={() => changeLanguage('ar')}>
        Arabic (RTL)
      </button>
    </div>
  );
}

RTL-Aware Components

Using Logical Properties

Instead of using left and right, use start and end in your styles:

// ❌ Not RTL-aware
<div className="pl-4 ml-2 border-l">Content</div>
 
// ✅ RTL-aware
<div className="ps-4 ms-2 border-s">Content</div>

Tailwind CSS supports logical properties with these prefixes:

  • ps- / pe- (padding-start/end)
  • ms- / me- (margin-start/end)
  • start- / end- (positioning)
  • border-s / border-e (border-start/end)
  • rounded-s / rounded-e (border-radius-start/end)

Checking Current Direction

You can check the current language direction in client components:

'use client';
 
import { useLanguage } from '@/providers/i18n-provider';
 
function DirectionAwareComponent() {
  const { language } = useLanguage();
  const isRTL = language.direction === 'rtl';
 
  return (
    <div>
      {isRTL ? (
        <span>RTL content</span>
      ) : (
        <span>LTR content</span>
      )}
    </div>
  );
}

Common RTL Use Cases

Mirroring Icons and Images

Some icons and images need to be mirrored in RTL mode:

'use client';
 
import { useLanguage } from '@/providers/i18n-provider';
import { ArrowLeft, ArrowRight } from 'lucide-react';
 
function DirectionalButton() {
  const { language } = useLanguage();
  const isRTL = language.direction === 'rtl';
 
  return (
    <button>
      {isRTL ? <ArrowLeft /> : <ArrowRight />}
      Next
    </button>
  );
}

Direction-Specific Styling

For more complex styling needs, use conditional classes based on direction:

'use client';
 
import { useLanguage } from '@/providers/i18n-provider';
import { cn } from '@/lib/utils';
 
function SidebarComponent() {
  const { language } = useLanguage();
  const isRTL = language.direction === 'rtl';
 
  return (
    <div className={cn(
      "border p-4",
      isRTL ? "mr-auto" : "ml-auto"
    )}>
      Sidebar content
    </div>
  );
}

Tables and Data Display

For tables and data displays, use text-start and text-end:

function DataTable({ columns }) {
  return (
    <table>
      <thead>
        <tr>
          {columns.map((column) => (
            <th key={column.id} className="text-start">
              {column.name}
            </th>
          ))}
        </tr>
      </thead>
      {/* Table body */}
    </table>
  );
}

For more information about RTL support in Radix UI, refer to the Radix UI Direction Provider documentation.

PreviousInternationalizationNextDark Mode