Lumeo

Direction Provider

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

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

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.

Direction = Ltr (default)

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

Direction = Rtl

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

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.