Embossed UI

Search documentation

Search for a page or component.

Direction

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

تسجيل الدخول إلى حسابك
أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك
مستوى الصوت
"use client"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { DirectionProvider } from "@/components/ui/direction"
import { Field, FieldLabel, FieldTitle } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Slider } from "@/components/ui/slider"

export function DirectionDemo() {
  return (
    <DirectionProvider direction="rtl">
      <Card dir="rtl" lang="ar" className="w-full max-w-sm">
        <CardHeader>
          <CardTitle>تسجيل الدخول إلى حسابك</CardTitle>
          <CardDescription>
            أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك
          </CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col gap-5">
          <Field>
            <FieldLabel htmlFor="direction-email">البريد الإلكتروني</FieldLabel>
            <Input
              id="direction-email"
              type="email"
              placeholder="m@example.com"
              dir="ltr"
              className="text-right"
            />
          </Field>
          <Field>
            <FieldTitle>مستوى الصوت</FieldTitle>
            <Slider defaultValue={[40]} aria-label="مستوى الصوت" />
          </Field>
        </CardContent>
        <CardFooter>
          <Button className="w-full">تسجيل الدخول</Button>
        </CardFooter>
      </Card>
    </DirectionProvider>
  )
}

The DirectionProvider sets the text direction (ltr or rtl) that Base UI's components read, for right-to-left languages like Arabic, Hebrew and Persian. Set dir on the matching element too, so the browser lays the content out in that direction.

Installation

pnpm dlx shadcn@latest add https://ui.ikramhasan.com/r/direction.json

Usage

import { DirectionProvider } from "@/components/ui/direction"
<html dir="rtl">
  <body>
    <DirectionProvider direction="rtl">
      {/* Your app content */}
    </DirectionProvider>
  </body>
</html>

useDirection

The useDirection hook returns the current direction.

import { useDirection } from "@/components/ui/direction"
 
function MyComponent() {
  const direction = useDirection()
  return <div>Current direction: {direction}</div>
}

API Reference

Direction re-exports Base UI's Direction Provider (direction: ltr · rtl, default ltr).

DialogDrawer