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/direction.json

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

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

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

Install the following dependencies:

bun add @ark-ui/react

npm install @ark-ui/react

pnpm add @ark-ui/react

yarn add @ark-ui/react

Copy and paste the following code into your project.

components/ui/direction.tsx

"use client";

import type React from "react";
import { LocaleProvider, useLocale } from "@/components/ui/locale";

export const DirectionProvider = (
  props: Omit<React.ComponentProps<typeof LocaleProvider>, "locale"> & {
    direction?: "ltr" | "rtl";
    locale?: string;
  }
) => {
  const { direction, locale, children, ...rest } = props;
  const resolvedLocale = locale ?? (direction === "rtl" ? "ar-BH" : "en-US");

  return (
    <LocaleProvider locale={resolvedLocale} {...rest}>
      {children}
    </LocaleProvider>

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.