SupaStart
Getting Started

RTL Support

Learn how to enable and configure Right-to-Left (RTL) support in Supastart

RTL Support

Supastart comes with built-in support for Right-to-Left (RTL) languages like Arabic. This guide will walk you through how the RTL support is implemented and how to use it in your application.

Configuration

1. Language Configuration

RTL support is automatically enabled when you use RTL languages. Supastart configures languages in the src/i18n/config.ts file:

export interface Language {
  code: string;
  name: string;
  shortName: string;
  direction: 'ltr' | 'rtl';
  flag: string;
}
 
export const languages: Language[] = [
  {
    code: 'en',
    name: 'English',
    shortName: 'EN',
    direction: 'ltr',
    flag: '/media/flags/united-states.svg',
  },
  {
    code: 'ar',
    name: 'Arabic',
    shortName: 'AR',
    direction: 'rtl',
    flag: '/media/flags/saudi-arabia.svg',
  },
  // Other languages...
];

2. Language Provider

The language provider in src/providers/i18n-provider.tsx manages the language state and sets the direction attribute:

function I18nProvider({ children, initialLanguage }: I18nProviderProps) {
  const [languageCode, setLanguageCode] = useState<string>(() => {
    // If initialLanguage is provided, use it
    if (initialLanguage) {
      return initialLanguage;
    }
 
    // Otherwise try to get from localStorage
    if (typeof window !== 'undefined') {
      return localStorage.getItem('language') || 'en';
    }
    return 'en'; // Default language if running on the server
  });
 
  // Find the current language configuration based on the language code
  const language =
    languages.find((lang) => lang.code === languageCode) || languages[0];
 
  useEffect(() => {
    if (typeof window !== 'undefined') {
      localStorage.setItem('language', languageCode);
    }
    if (language?.direction) {
      document.documentElement.setAttribute('dir', language.direction);
    }
    i18n.changeLanguage(languageCode);
  }, [languageCode, language]);
 
  // ... rest of the component
}

3. Direction Provider

Supastart includes a DirectionProvider that integrates with Radix UI's direction context:

// src/providers/direction-provider.tsx
'use client';
 
import { DirectionProvider as RadixDirectionProvider } from '@radix-ui/react-direction';
import { useLanguage } from './i18n-provider';
 
const DirectionProvider = ({ children }: { children: React.ReactNode }) => {
  const { language } = useLanguage();
 
  return (
    <RadixDirectionProvider dir={language.direction}>
      {children}
    </RadixDirectionProvider>
  );
};

4. Component-Level RTL Support

Components are designed with RTL awareness using Tailwind's RTL utilities:

// Example from breadcrumb.tsx
<ChevronRight className="rtl:rotate-180" />
 
// Example from table.tsx
<th
  className={cn(
    'h-12 px-4 text-left rtl:text-right align-middle font-normal text-muted-foreground',
    className,
  )}
  {...props}
/>

Using RTL in Your Application

Accessing the Current Language

You can access the current language and its direction using the useLanguage hook:

'use client';
 
import { useLanguage } from '@/providers';
 
function MyComponent() {
  const { language, changeLanguage } = useLanguage();
 
  // Check if current language is RTL
  const isRTL = language.direction === 'rtl';
 
  // Switch to another language
  const switchToArabic = () => changeLanguage('ar');
 
  return (
    <div>
      {isRTL ? 'This is RTL mode' : 'This is LTR mode'}
      <button onClick={switchToArabic}>Switch to Arabic</button>
    </div>
  );
}

Language Switching in Settings

Supastart includes language selection in the settings page:

// Simplified example from settings page
const languages = [
  {
    code: 'en',
    name: 'English',
    shortName: 'EN',
    direction: 'ltr',
    flag: '/media/flags/united-states.svg',
  },
  {
    code: 'ar',
    name: 'Arabic',
    shortName: 'AR',
    direction: 'rtl',
    flag: '/media/flags/saudi-arabia.svg',
  },
  // Other languages...
];
 
function LanguageSetting() {
  const { language, changeLanguage } = useLanguage();
 
  return (
    <Select
      value={language.code}
      onValueChange={(value) => changeLanguage(value)}
    >
      <SelectTrigger className="w-full">
        <SelectValue placeholder="Select language" />
      </SelectTrigger>
      <SelectContent>
        {languages.map((lang) => (
          <SelectItem key={lang.code} value={lang.code}>
            <div className="flex items-center gap-2">
              <img src={lang.flag} alt={lang.name} className="h-4 w-4" />
              <span>{lang.name}</span>
            </div>
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

Styling with RTL

Tailwind CSS Support

When using Tailwind CSS classes, use logical property utilities and RTL modifiers:

<!-- Instead of: -->
<div class="ml-4 pl-2">
 
<!-- Use: -->
<div class="ms-4 ps-2">
 
<!-- Or use RTL variant for rotation/flipping: -->
<ChevronRight className="rtl:rotate-180" />

Common RTL-aware Tailwind classes:

  • ms-* - margin-inline-start
  • me-* - margin-inline-end
  • ps-* - padding-inline-start
  • pe-* - padding-inline-end
  • text-start - text align start (replaces text-left)
  • text-end - text align end (replaces text-right)
  • rtl:* - RTL variant (applies styles only in RTL mode)

Component-Specific Adjustments

Supastart provides specialized RTL handling for specific components:

// Calendar component arrow adjustment
components={{
  Chevron: (props) => {
    if (props.orientation === 'left') {
      return <ChevronLeft className="h-4 w-4 rtl:rotate-180" />;
    } else {
      return <ChevronRight className="h-4 w-4 rtl:rotate-180" />;
    }
  },
}}
 
// Pagination with RTL support
const btnArrowClasses = btnBaseClasses + ' rtl:transform rtl:rotate-180';

Text Direction in Tables

Table headers require explicit text alignment for RTL support:

<th
  className={cn(
    'h-12 px-4 text-left rtl:text-right align-middle font-normal text-muted-foreground',
    className,
  )}
/>

Testing RTL Support

1. Change to Arabic Language

To test RTL support, switch your language to Arabic in the application settings.

2. Verify Layout Changes

Ensure that:

  • Text flows from right to left
  • Navigation elements move to the opposite sides
  • Icons that indicate direction (arrows, chevrons) are appropriately flipped
  • Alignment of elements is correctly mirrored

3. Test Component Behavior

Verify that interactive components like dropdowns, modals, and tooltips open in the correct direction.

4. Validate Text Entry

Test text input in forms to ensure cursor positioning and text direction are correct.

PreviousChangelogNextDeployment