ComponentsLayout

Direction

Tells Sprõut's Base UI parts whether text reads left to right or right to left, so arrow keys, indicators, and popups follow the language on the page.

Left to right

direction="ltr" with dir="ltr". The path starts on the left.

Right to left

direction="rtl" with dir="rtl". The path starts on the right and the chevron flips.

Keyboard and useDirection

Base UI parts read the provider. In right-to-left text, the left arrow moves to the next view. useDirection returns the same value to your own parts.

useDirection() returns "rtl"

Usage

import { DirectionProvider } from "@tulipfarm/sprout/direction";

<DirectionProvider direction="rtl">
  <div dir="rtl">
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/projects">المشاريع</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>الحديقة</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  </div>
</DirectionProvider>

direction is "ltr" (the default) or"rtl". The provider renders no element and does not set thedir attribute. Set a matching dir on a wrapping element, or on html for a whole app, so text, layout, and CSS such as the breadcrumb chevron follow the same direction.

Reading the direction

import { useDirection } from "@tulipfarm/sprout/direction";

function NextStepIcon() {
  const direction = useDirection();
  return direction === "rtl" ? <ArrowLeft /> : <ArrowRight />;
}

useDirection() returns the nearest provider's direction, or"ltr" outside one. Use it in your own parts that pick icons or keys by direction.

Accessibility

Arrow keys in toggle groups, tabs, menus, and other composite parts follow the provider: in right-to-left text the left arrow moves to the next item. Focus rings and transitions are those of each part. The provider has no styles or theme tokens of its own.