Direction

import { DirectionPreview } from "@/components/atom/direction-preview"

export default function DirectionDemo() {
  return (
    <>
      <DirectionPreview />
    </>
  )
}

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @codebase/direction
Copy

Usage

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

Copy<DirectionProvider dir={locale === "ar" ? "rtl" : "ltr"}>
  <App />
</DirectionProvider>

This site wraps every locale layout in a DirectionProvider driven by the active language, so dropdowns, sheets, and menus rendered through portals inherit the correct direction automatically. The dir attribute on <html> handles static layout; the provider handles Radix primitives.