Shadcn Direction

React direction provider for Arabic, Hebrew, and Persian pages. Built with TypeScript and Tailwind CSS for Next.js using Base UI — one context so menus and sliders flip.

DirectionProvider is React context for ltr or rtl. Radix menus, sliders, and sheets read it to flip panels and arrow keys. It does not set dir on the DOM — put that on <html> or a subtree so Tailwind logical classes flip too.

Scroll to load preview...

Looking for a neobrutalism version for shadcn?

Same direction, thicker borders. The NeoBrutalism direction is the kit if you want that look.

Official Base UI previews this with a card in RTL — same provider, real chrome.

Scroll to load preview...

Usage

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

<html lang="ar" dir="rtl">
  <body>
    <DirectionProvider dir="rtl">{children}</DirectionProvider>
  </body>
</html>

dir is "ltr" or "rtl". direction is the same value — if you pass both, direction wins.

const direction = useDirection()
return <div dir={direction}>{/* … */}</div>

Composition

DirectionProvider

useDirection

useDirection reads the nearest provider. No provider means "ltr".

API

Prop

Type

useDirection

Prop

Type

Returns "ltr" | "rtl". No provider and no override → "ltr".

Notes

Context does not set dir

The provider is context only. Tailwind rtl: and text-start key off the DOM dir attribute. Set that on <html> or the subtree, or stamp dir={useDirection()} on the node.

Derive both from the locale. Two sources of truth will disagree.