Direction Provider

Wraps your app to provide global reading direction.

من اليمين إلى اليسار

Right-to-left reading direction.

<DirectionProvider.direction_provider
  dir="rtl"
  style="background: white; color: var(--mauve-12); padding: 20px; border-radius: 6px; width: 260px;"
>
  <p style="margin: 0 0 10px; font-weight: 500;">من اليمين إلى اليسار</p>
  <div class="DemoSeparatorRoot" style="background: var(--violet-6); height: 1px; margin: 12px 0;">
  </div>
  <p style="margin: 0; font-size: 14px; color: var(--mauve-11);">
    Right-to-left reading direction.
  </p>
</DirectionProvider.direction_provider>

• Enables all primitives to inherit global reading direction.

Anatomy

Import the component.

<DirectionProvider.direction_provider>
  …
</DirectionProvider.direction_provider>

Anatomy

Direction Provider: Provides global reading direction to descendants.

API Reference

Direction Provider

When creating localized apps that require right-to-left (RTL) reading direction, wrap your application with DirectionProvider.direction_provider so primitives adjust their behavior based on the dir attribute.

Prop	Type	Default	Description
`dir`	`string`	`"ltr"`

dir

Type string Default "ltr"

Example

Use the direction provider.

<DirectionProvider.direction_provider dir="rtl">
  …your app…
</DirectionProvider.direction_provider>