Get Started
Input
Feedback
Display
Installation
i18n
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 shadcn@latest add https://ui.tyap.me/r/styles/base/direction.jsonnpx shadcn@latest add https://ui.tyap.me/r/styles/base/direction.jsonyarn dlx shadcn@latest add https://ui.tyap.me/r/styles/base/direction.jsonbunx --bun shadcn@latest add https://ui.tyap.me/r/styles/base/direction.json
Install the following dependencies:
pnpm add @base-ui/reactnpm install @base-ui/reactyarn add @base-ui/reactbun add @base-ui/react
Copy and paste the following code into your project.
"use client"
export {
DirectionProvider,
useDirection,
} from "@base-ui/react/direction-provider"
Update the import paths to match your project setup.
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>
}