# Direction Provider

Source: https://lumeo.nativ.sh/components/direction-provider

# Direction Provider

Sets the layout direction (LTR / RTL) for everything inside it.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<DirectionProvider />

## When to Use

-   Render a right-to-left (Arabic, Hebrew, Persian, …) section or a whole app.
-   Scope a direction to one subtree — e.g. an RTL preview inside an LTR admin.
-   Lumeo components use logical CSS utilities (`ms-/me-/ps-/pe-/start-/end-/text-start/…`), so wrapping them in an RTL provider mirrors their layout automatically.

Preview Code

LTR vs RTL

Direction = Ltr (default)

The icon sits on the left and text aligns to the start.

Action

Direction = Rtl

Same markup — now the icon is on the right and text aligns to the right.

Action

Preview Code

Wrapping the whole app

Wrap your app's root (or any subtree) in a single `DirectionProvider`; everything inside inherits the direction. The native `dir` attribute it sets also flips native text alignment, form controls and bidi text — not just Lumeo's logical utilities.