Source: https://www.radix-ui.com/primitives/docs/utilities/direction-provider

Radix Homepage

Made by WorkOS

Radix Homepage

Made by WorkOS

ThemesThemes PrimitivesPrimitives IconsIcons ColorsColors

Documentation Case studies Blog

Search

/

Overview

Introduction Getting started Accessibility Releases

Guides

Styling Animation Composition Server-side rendering

Components

Accordion Alert Dialog Aspect Ratio Avatar Checkbox Collapsible Context Menu Dialog Dropdown Menu Form

Preview Hover Card Label Menubar Navigation Menu One-Time Password Field

Preview Password Toggle Field

Preview Popover Progress Radio Group Scroll Area Select Separator Slider Switch Tabs Toast Toggle Toggle Group Toolbar Tooltip

Utilities

Accessible Icon Direction Provider Portal Slot Visually Hidden

Utilities

Direction Provider

Wraps your app to provide global reading direction.

Features

Enables all primitives to inherit global reading direction.

Installation

---

Install the component from your command line.

npm install @radix-ui/react-direction

Anatomy

---

Import the component.

import { Direction } from "radix-ui";

export default () => <Direction.Provider />;

API Reference

---

Provider

When creating localized apps that require right-to-left (RTL) reading direction, you need to wrap your application with the Direction.Provider component to ensure all of the primitives adjust their behavior based on the dir prop.

| Prop | Type | Default | | --- | --- | --- | | dir<br><br>Prop description | enum<br><br>See full type | No default value |

Example

---

Use the direction provider.

import { Direction } from "radix-ui";

export default () => (
	<Direction.Provider dir="rtl">{/* your app */}</Direction.Provider>
);

PreviousAccessible Icon

NextPortal

Edit this page on GitHub.