Direction

Sets left-to-right or right-to-left reading direction for components.

واجهة من اليمين إلى اليسار

Installation

Install Direction from Oros with shadcn CLI 4.13.0.

pnpm dlx shadcn@4.13.0 add @oros/direction

Usage

import {
  DirectionProvider,
} from "@/components/ui/direction"

Open the Source tab in the preview for a complete working example.

Anatomy

Export	Responsibility
DirectionProvider	Provides shared state and behavior to descendant parts.
useDirection	Reads or controls the component's shared state.

API Reference

Direction exports 2 named entries. Component exports accept the props of their underlying HTML element or Base UI component, plus an optional className, unless the source defines a more focused type.

DirectionProvider Component
useDirection Hook

Accessibility

Set the provider direction and the rendered DOM `dir` attribute together so browser text layout and component behavior agree.
Treat language and direction as separate concerns; set `lang` on the appropriate document or content region.

Source

Direction uses the standard shadcn API and is distributed through Oros. Installing it adds the component source and required dependencies to your app. The Source tab above shows a complete usage example.

Dialog Drawer