Layout

Direction

Left-to-right and right-to-left layouts.

Direction

Left-to-right and right-to-left layouts.

Layout

Direction-aware primitives

Install

npx shadcn@latest add http://localhost:3000/r/direction.json

Usage

"use client"

import { DirectionProvider } from "@/components/ui/direction"

export function Example() {
  return (
    <DirectionProvider direction="ltr">
      <div className="rounded-xl border px-4 py-3 text-sm">
        Direction-aware primitives
      </div>
    </DirectionProvider>
  )
}

API

DirectionProvideruseDirection

Source code +

"use client"

export {
  DirectionProvider,
  useDirection,
} from "@base-ui/react/direction-provider"

Registry JSON ↗