rapidUI

Direction

Provider that sets left-to-right or right-to-left direction for its subtree.

registry.json

Installation

pnpm dlx shadcn@latest add https://rdf.dev.360online.com/r/direction.json

Installs to @/components/ui/direction.

Manual installation

Install the dependencies:

pnpm add @base-ui/react@^1.8.0

Copy the source into your project:

components/ui/direction.tsx
'use client'

import { DirectionProvider as DirectionProviderPrimitive, type TextDirection } from '@base-ui/react/direction-provider'
import type * as React from 'react'

function DirectionProvider({
	dir,
	direction,
	children,
}: Readonly<{
	/** The reading direction. Alias of `direction`. */
	dir?: TextDirection
	/** The reading direction (default `'ltr'`). */
	direction?: TextDirection
	children?: React.ReactNode
}>) {
	return <DirectionProviderPrimitive direction={direction ?? dir}>{children}</DirectionProviderPrimitive>
}

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

Provides a reading direction (left-to-right or right-to-left) to every Base UI-based component below it, so that keyboard navigation, submenu placement and animations follow the direction of the document. Use it together with the dir attribute on a wrapping element, and read the current direction with the useDirection hook.

Features

  • DirectionProvider for ltr and rtl
  • useDirection hook to read the current direction
  • Affects keyboard navigation and positioning in Base UI components
  • Accepts either dir or direction as prop

Usage

import { DirectionProvider, useDirection } from '@/components/ui/direction'

export function App({ children }: { children: React.ReactNode }) {
  return (
    <DirectionProvider dir="rtl">
      <div dir="rtl">{children}</div>
    </DirectionProvider>
  )
}

function DirectionLabel() {
  const direction = useDirection()
  return <span>{direction}</span>
}

Examples

Default

A parking permit e-service with tabs and form fields inside a DirectionProvider. Switch dir with the controls; in rtl the content is shown in Arabic.

Right To Left

The same e-service in right-to-left mode, in Arabic. Arrow keys in the tabs follow the reading direction. The registration number keeps dir="ltr".

Side By Side

English (ltr) and Arabic (rtl) rendered next to each other.

Accessibility

  • Set the dir attribute on the html element or a wrapper so the browser renders text in the right direction
  • DirectionProvider only informs components; it does not change text layout by itself
  • Arrow key behaviour in tabs, menus and sliders is mirrored in rtl mode
  • Set the lang attribute to match the language of the content