Configuration

TwDirectionProvider

TwDirectionProvider sets a Blazor app, or part of a page, to right to left or left to right, mirroring layout and arrow keys for Arabic and Hebrew.

Last updated 18 October 2026

Right to left

Wrap content in a TwDirectionProvider and set Direction. Everything inside is mirrored: text aligns to the other side, icons and labels swap places, panels open from the other edge, and the Left and Right arrow keys swap so they keep following what is on screen.

الاسم

الإشعارات

معلومات الملف الشخصي.

RAZOR

<TwDirectionProvider Direction="TextDirection.RightToLeft" Class="flex flex-col gap-4">
    <TwTextfield Label="الاسم" @bind-Value="name" Placeholder="اكتب اسمك" />
    <TwSwitch @bind-Value="notifications" Label="الإشعارات" />
    <TwTabContainer AriaLabel="الحساب">
        <TwTab Label="الملف الشخصي">
            <p>معلومات الملف الشخصي.</p>
        </TwTab>
        <TwTab Label="الأمان">
            <p>إعدادات الأمان.</p>
        </TwTab>
        <TwTab Label="الفواتير">
            <p>سجل الفواتير.</p>
        </TwTab>
    </TwTabContainer>
    <TwPagination TotalPages="10" @bind-ActivePage="page" AriaLabel="الصفحات" />
</TwDirectionProvider>

CSHARP

@code {
    private string name = string.Empty;
    private bool notifications = true;
    private int page = 1;
}

Follow the language

Leave Direction unset and the provider follows the language the application is running in: right to left for a culture such as Arabic, Hebrew, Persian or Urdu, left to right for everything else. Wrap the layout once and the whole application turns with the culture. Keep the toast and dialog providers inside it, so toasts and dialogs turn too.

RAZOR

@* MainLayout.razor *@
<TwDirectionProvider>
    <TwSidebar>
        @Body
    </TwSidebar>
    <TwToastProvider />
    <TwDialogProvider />
</TwDirectionProvider>

To pin the direction whatever the culture, set it once in AddTwBlazor.

CSHARP

builder.Services.AddTwBlazor(options =>
{
    options.Localization.Direction = TextDirection.RightToLeft;
}, Theme.CreateTheme);

Without the provider

The provider is a convenience. What the styles react to is the dir attribute, so an application that already sets it on the html element does not need one. Set it from the same culture twblazor reads, so the layout and the arrow keys agree.

RAZOR

@* App.razor *@
@inject ITwLocalizer Localizer

<html lang="@CultureInfo.CurrentUICulture.Name"
      dir="@(Localizer.Direction == TextDirection.RightToLeft ? "rtl" : "ltr")">

The dir attribute has to be there. Setting direction: rtl in CSS alone turns the text but not the parts of the theme that are mirrored with Tailwind's rtl: variant.

One part of a page

Providers nest, and the nearest one wins. Use this for a left to right island in a right to left page, or the other way round.

هذا التنبيه يُقرأ من اليمين إلى اليسار.

This alert reads left to right.

مستوى الصوت

RAZOR

<TwDirectionProvider Direction="TextDirection.RightToLeft" Class="flex flex-col gap-4">
    <TwAlert Color="Color.Info">هذا التنبيه يُقرأ من اليمين إلى اليسار.</TwAlert>
    <TwDirectionProvider Direction="TextDirection.LeftToRight">
        <TwAlert Color="Color.Success">This alert reads left to right.</TwAlert>
    </TwDirectionProvider>
    <TwSlider T="int" @bind-Value="volume" Min="0" Max="100" Label="مستوى الصوت" />
</TwDirectionProvider>

CSHARP

@code {
    private int volume = 40;
}

What is mirrored

Mirroring follows the reading direction, so anything described as Left or Right means the start or end of the line.

Part	Right to left
Text, spacing, borders and icons	Swap sides. A leading icon sits on the right of its label, and an accent border moves to the right edge.
Chevrons and arrows	Point the other way: the next button in a pagination, calendar, carousel or date picker points left.
Left and Right arrow keys	Swap in tabs, trees, calendars, date grids and the carousel, so each key still moves the way it points.
Panels and popovers	Open from the right edge of their field and flip back if they would leave the screen.
Dialog positions, toasts and tooltips	Left and Right mean start and end. A top left dialog appears top right, toasts stack in the bottom left, and a tooltip placed Left appears on the right.
Sidebar	Sits on the right and slides in from the right on a small screen.
Slider, switch and progress	Fill from the right.
Time pickers	Not mirrored. Hours stay before minutes, as times are written in every language.
Colour picker	Not mirrored. The saturation square and the hue strip are pictures of a colour space, not text.
Charts	Not mirrored. Axes keep their orientation, and labels and legends take the direction of their text.

Your own theme and markup

The default theme uses Tailwind's logical classes, which follow the direction by themselves. If you keep your own copy of Theme.cs, or write your own markup around the components, use them too.

Instead of	Use
`ml-4, mr-4`	`ms-4, me-4`
`pl-4, pr-4`	`ps-4, pe-4`
`left-0, right-0`	`start-0, end-0`
`text-left, text-right`	`text-start, text-end`
`border-l, border-r`	`border-s, border-e`
`rounded-l-md, rounded-r-md`	`rounded-s-md, rounded-e-md`

A sideways transform has no logical form, so pair it with the rtl: variant, as the theme does for the switch thumb: peer-checked:translate-x-full rtl:peer-checked:-translate-x-full.