Direction

Provides the reading direction (LTR or RTL) to Base UI components.

Installation

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

Usage

Base UI popups (Popover, Tooltip, Menu, Select, ...) do not read the dir attribute of the document. Instead, they take the reading direction from DirectionProvider, which is what makes side="inline-start" / side="inline-end" positioning, keyboard navigation and RTL specific animations flip correctly. Wrap your app (or the part of it that is right-to-left) in the provider and set the dir attribute on the same element so the DOM matches.

import { DirectionProvider, useDirection } from '@/components/ui/direction'

<DirectionProvider direction="rtl">
  <div dir="rtl">
    <Popover>
      <PopoverTrigger render={<Button />}>Open</PopoverTrigger>
      <PopoverContent side="inline-end">...</PopoverContent>
    </Popover>
  </div>
</DirectionProvider>

Use the useDirection hook to read the current direction in your own components:

function Arrow() {
  const direction = useDirection()
 
  return direction === "rtl" ? <ArrowLeftIcon /> : <ArrowRightIcon />
}

See the Base UI documentation for more details.