GitHub
New

Direction

PreviousNext

A provider component that sets the text direction for your application.

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

pnpm dlx shadcnui-hono-jsx@latest add direction

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>
}

Notes

  • DirectionProvider carries the direction through Hono context and renders no element, like Base UI; set dir on an element too. The generated components follow the CSS direction, so they do not need it.
  • Upstream documentation: shadcn/ui Direction. See also Differences from shadcn/ui.