Direction

Base UICopy Anchor Link

How it worksCopy Anchor Link

DirectionProvider and useDirection are a transparent re-export of Base UI’s direction utilities. They feed Base UI context so wrapped controls flip for RTL; they do not set HTML dir or CSS direction. Pair the provider with dir="rtl" on a portal ancestor — usually <html> — so body-mounted popups inherit the same direction.

Optional beyond Setup. Import from @viraui/react instead of @base-ui/react/direction-provider. Full API stays on Base UI.

Common examplesCopy Anchor Link

RTL subtree with SliderCopy Anchor Link

import { DirectionProvider, Slider } from '@viraui/react';

<div dir="rtl">
  <DirectionProvider direction="rtl">
    <Slider defaultValue={25} aria-label="Volume" />
  </DirectionProvider>
</div>

Read direction in a portal-safe hookCopy Anchor Link

import { DirectionProvider, Text, useDirection } from '@viraui/react';

function DirectionLabel() {
  const direction = useDirection();
  return <Text size="s">Direction: {direction}</Text>;
}

<DirectionProvider direction="rtl">
  <DirectionLabel />
</DirectionProvider>

Ask your agentCopy Anchor Link

This app needs right-to-left layout. Put direction context on the app shell so Base UI–backed controls flip correctly, and set document direction so portaled overlays match. Keep the wiring minimal — use the ViraUI re-export, not a direct Base UI import.