ContextQMD
Back to Shadcn Ui

Direction

apps/v4/content/docs/components/base/direction.mdx

latest1.6 KB
Original Source

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.

<ComponentPreview styleName="base-nova" name="card-rtl" direction="rtl" previewClassName="h-auto" hideCode />

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">Command</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">
bash
npx shadcn@latest add direction
</TabsContent> <TabsContent value="manual"> <Steps className="mb-0 pt-2">

<Step>Install the following dependencies:</Step>

bash
npm install @base-ui/react

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

<ComponentSource name="direction" title="components/ui/direction.tsx" styleName="base-nova" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </CodeTabs>

Usage

tsx
import { DirectionProvider } from "@/components/ui/direction"
tsx
<html dir="rtl">
  <body>
    <DirectionProvider direction="rtl">
    </DirectionProvider>
  </body>
</html>

useDirection

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

tsx
import { useDirection } from "@/components/ui/direction"

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