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/radix/direction.jsonnpx shadcn@latest add https://kit.dev/r/radix/direction.jsonpnpm dlx shadcn@latest add https://kit.dev/r/radix/direction.jsonyarn shadcn@latest add https://kit.dev/r/radix/direction.jsonInstall the following dependencies:
bun add radix-uinpm install radix-uipnpm add radix-uiyarn add radix-uiCopy and paste the following code into your project.
"use client";
import { Direction } from "radix-ui";
import type React from "react";
type DirectionProviderProps = React.ComponentProps<
typeof Direction.DirectionProvider
>;
export const DirectionProvider = (
props: Omit<DirectionProviderProps, "dir"> & {
dir?: DirectionProviderProps["dir"];
direction?: DirectionProviderProps["dir"];
}
) => {
const { dir, direction, children } = props;
return (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