Direction

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.

Installation

bunx --bun shadcn@latest add @sui/direction

Install with the shadcn CLI or use the shared @workspace/ui package. Follow the installation guide to configure the registry, load styles, and choose import aliases.

Usage

import { DirectionProvider } from "@workspace/ui/components/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 "@workspace/ui/components/direction"

function MyComponent() {
  const direction = useDirection()
  return <div>Current direction: {direction}</div>
}