Direction

A provider component that sets the text direction for your application.

The DirectionProvider component sets the text direction (ltr or rtl) for Cubix primitives. This is essential for right-to-left languages like Arabic, Hebrew, and Persian. Pair it with dir="rtl" on html (or a wrapping container) so CSS logical properties also flip.

Preview direction

Volume

Make changes to your account here.

const [direction, setDirection] = React.useState<"ltr" | "rtl">("rtl")

return (
  <div dir={direction}>
    <DirectionProvider direction={direction}>
      <Slider defaultValue={[40]} max={100} step={1} />
    </DirectionProvider>
  </div>
)

Installation

pnpm dlx cubix@latest add direction --base aria

Usage

Import

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

Example

<html dir="rtl">
  <body>
    <DirectionProvider direction="rtl">
      {/* Your app content */}
    </DirectionProvider>
  </body>
</html>

useDirection

The useDirection hook returns the current direction from the nearest provider. Useful for portaled UI that renders outside your app root.

Import

import { useDirection } from "@/components/cubix/direction"

Example

function MyComponent() {
  const direction = useDirection()
  return <div>Current direction: {direction}</div>
}

Current direction: ltr

function MyComponent() {
  const direction = useDirection()
  return <div>Current direction: {direction}</div>
}

API Reference

DirectionProvider

Prop	Type	Default	Description
direction	"ltr" \| "rtl"	"ltr"	The reading direction of the text.
children	React.ReactNode	-	App content that should inherit the text direction.

useDirection

Prop	Type	Default	Description
return	"ltr" \| "rtl"	-	The current text direction from the nearest DirectionProvider.