shadcn.io is not affiliated with official shadcn/ui
Shadcn Direction for React
Set left-to-right or right-to-left flow for a subtree.
StartltrEnd
Installation
bunx --bun shadcn@latest add https://kit.dev/r/base/direction.jsonnpx shadcn@latest add https://kit.dev/r/base/direction.jsonpnpm dlx shadcn@latest add https://kit.dev/r/base/direction.jsonyarn shadcn@latest add https://kit.dev/r/base/direction.jsonInstall the following dependencies:
bun add @base-ui/reactnpm install @base-ui/reactpnpm add @base-ui/reactyarn add @base-ui/reactCopy and paste the following code into your project.
"use client";
import {
DirectionProvider as DirectionProviderPrimitive,
useDirection as useDirectionPrimitive,
} from "@base-ui/react/direction-provider";
export const DirectionProvider = DirectionProviderPrimitive;
export const useDirection = useDirectionPrimitive;Update the import paths to match your project setup.
Usage
import { DirectionProvider } from "@/components/ui/direction";<DirectionProvider direction="ltr">
<p>Content inherits the provided direction.</p>
</DirectionProvider>import { useDirection } from "@/components/ui/direction";
const Example = () => {
const direction = useDirection();
return <div>Current direction: {direction}</div>;
};See the RTL configuration guide for document-level direction. This page does not replace locale setup.
Demos
Rtl
Right-to-left direction. Logical ms / me spacing follows the reading direction.
API Reference
DirectionProvider
PropType
children?React.ReactNode