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.

PreviewCode

StartltrEnd

Installation

bunx --bun shadcn@latest add https://kit.dev/r/aria/direction.json

npx shadcn@latest add https://kit.dev/r/aria/direction.json

pnpm dlx shadcn@latest add https://kit.dev/r/aria/direction.json

yarn shadcn@latest add https://kit.dev/r/aria/direction.json

Install the following dependencies:

bun add react-aria-components

npm install react-aria-components

pnpm add react-aria-components

yarn add react-aria-components

Copy and paste the following code into your project.

components/ui/direction.tsx

"use client";

import type React from "react";
import { I18nProvider, useLocale as useRacLocale } from "react-aria-components";

export { I18nProvider } from "react-aria-components";

export const DirectionProvider = (
  props: React.ComponentProps<typeof I18nProvider> & {
    direction?: "ltr" | "rtl";
  }
) => {
  const { direction, locale: localeProp, children, ...rest } = props;
  const { locale: currentLocale } = useRacLocale();
  let locale = localeProp;

  if (!locale && direction) {
    locale = new Intl.Locale(currentLocale, {

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.