Direction

A context provider that flips components between LTR and RTL so menus, sliders, and tabs mirror correctly in Arabic, Hebrew, and Persian.

The DirectionProvider component is used to set the text direction (ltr or rtl) for your application. This is essential for supporting right-to-left languages like Arabic, Hebrew, and Persian.

Here's a preview of the component in RTL mode. Use the language selector to switch the language. To see more examples, look for the RTL section on components pages.

تسجيل الدخول إلى حسابك

أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك

Wrap it around your tree once and every direction-aware component — dropdown menus, sliders, tabs, tooltips — reads the direction from React context instead of sniffing the DOM. Built on the Base UI Direction Provider utility; it renders nothing and ships no styling of its own — the neobrutalist borders and shadows live in the components it steers.

Reach for it when:

Arabic, Hebrew, or Persian apps — arrow-key navigation, popup alignment, and slider behavior flip with the reading direction.
A locale switcher — flip the provider's direction together with dir on <html> when the user changes language.
Mixed-direction pages — nest a provider around an RTL block (an embedded form, quoted content) inside an otherwise LTR app.

Installation


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/direction.json
npx shadcn@latest add https://neobrutalism.com/r/base/direction.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/direction.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/direction.json

Install the following dependencies:


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Copy and paste the following code into your project.

components/ui/direction.tsx

"use client"

import * as React from "react"
import { Direction } from "radix-ui"

function DirectionProvider({
  dir,
  direction,
  children,
}: React.ComponentProps<typeof Direction.DirectionProvider> & {
  direction?: React.ComponentProps<typeof Direction.DirectionProvider>["dir"]
}) {
  return (
    <Direction.DirectionProvider dir={direction ?? dir}>
      {children}
    </Direction.DirectionProvider>
  )
}

const useDirection = Direction.useDirection

export { DirectionProvider, useDirection }

Update the import paths to match your project setup.

Usage

import { DirectionProvider } from "@/components/ui/direction"

<html dir="rtl">
  <body>
    <DirectionProvider direction="rtl">
      {/* Your app content */}
    </DirectionProvider>
  </body>
</html>

useDirection

The useDirection hook is used to get the current direction of the application.

import { useDirection } from "@/components/ui/direction"
 
function MyComponent() {
  const direction = useDirection()
  return <div>Current direction: {direction}</div>
}

Accessibility

DirectionProvider steers component logic only — it never sets the dir attribute. Always set dir on <html> (or the wrapping element) as well: browsers, screen readers, and CSS logical properties resolve direction from the DOM attribute, not from React context. Keeping the two in sync is what makes an RTL page both render and read correctly.

Direction

Installation#