║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Direction Provider description: Provides bidirectional text support (RTL/LTR) across your application. links: api: /docs/utilities/direction-provider#api-reference

Installation

CLI

npx shadcn@latest add "https://diceui.com/r/direction-provider"

Manual

<Steps> <Step> Install the following dependencies:

 ```package-install
 @diceui/direction-provider
 ```

</Step> <Step> Copy and paste the following code into your project.

<ComponentSource src="./registry/default/components/direction-provider.tsx" />

</Step> </Steps>

Usage

import { DirectionProvider } from "@diceui/direction-provider"

export default function App() {
  return (
    <DirectionProvider dir="ltr">
      <YourApp />
    </DirectionProvider>
  )
}

API Reference

DirectionProvider

Manages direction context for the useDirection hook.

<AutoTypeTable path="./types/docs/utilities.ts" name="DirectionProviderProps" />

useDirection

A hook to access the current direction.

import { useDirection } from "@/components/direction-provider"

function Component() {
  const dir = useDirection()
  
  return (
    <button dir={dir}>
      Do a kickflip
    </button>
  )
}

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║