Direction
Sets the reading direction (LTR or RTL) for every Radix-based component beneath it.
Installation
npx shadcn@latest add @uqudo/directionUsage
import { DirectionProvider } from "@/components/uqudo/ui/direction"Wrap the app root once and set dir on <html> to the same value. Every
Radix-based component in this registry (menus, tabs, sliders, popovers, ...)
reads the direction from the provider and flips its layout, keyboard navigation
and sub-menu placement accordingly.
import { DirectionProvider } from "@/components/uqudo/ui/direction"
export default function RootLayout({ children }: LayoutProps<"/">) {
const dir = "rtl"
return (
<html lang="ar" dir={dir}>
<body>
<DirectionProvider dir={dir}>{children}</DirectionProvider>
</body>
</html>
)
}The <html dir> attribute takes care of CSS logical properties (ps-*,
start-*, rtl: variants) while DirectionProvider takes care of the
JavaScript side, so both are needed.
Examples
Reading the direction
useDirection() returns the direction of the closest provider, or "ltr" when
there is none.
Reading direction: ltr
Reading direction: rtl
API Reference
DirectionProvider
Prop
Type
useDirection
const dir = useDirection()Re-exported from Radix. Returns "ltr" | "rtl". Accepts an optional local
direction that wins over the provider value: useDirection("rtl").