3

Direction

This repo is RTL-first by default, but DirectionProvider is useful when you need to force a specific direction on a subtree regardless of the page's own dir — for example, an embedded LTR code block inside an otherwise RTL page.

Last updated August 8, 2026

CreditsUnchangedPublished

Copied from shadcn/ui.

Overview

شروعپایان
import { DirectionProvider } from "@/components/ui/direction"
 
export function DirectionDemoExample() {
  return (
    <DirectionProvider direction="rtl">
      <div className="flex w-full max-w-xs items-center justify-between rounded-lg border border-border px-4 py-3">
        <span className="text-sm text-muted-foreground">شروع</span>
        <span className="text-sm text-muted-foreground">پایان</span>
      </div>
    </DirectionProvider>
  )
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/direction.json

Usage

import { DirectionProvider } from "@/components/ui/direction"
 
export function Example() {
  return (
    <DirectionProvider direction="rtl">
      {/* Base UI components inside here read RTL */}
    </DirectionProvider>
  )
}

useDirection

Read the direction set by the nearest DirectionProvider with the useDirection hook.

Current direction: rtl
"use client"
 
import {
  DirectionProvider,
  useDirection,
} from "@/components/ui/direction"
 
function CurrentDirection() {
  const direction = useDirection()
 
  return (
    <div className="rounded-lg border border-border px-4 py-3 text-sm text-muted-foreground">
      Current direction: <span className="text-foreground">{direction}</span>
    </div>
  )
}
 
export function DirectionHookExample() {
  return (
    <DirectionProvider direction="rtl">
      <CurrentDirection />
    </DirectionProvider>
  )
}

API Reference

DirectionProvider

Edit this page on GitHub
PreviousDialogNextDrawer