Docs/Direction

Direction

RTL/LTR direction context provider for internationalization.

Usage

tsx

1import { Direction } from '@storm-ds/ui'
2
3<Direction dir="rtl">
4  <App />
5</Direction>

LTR (Left-to-Right)

Left to Right

This content flows left-to-right. This is the default direction for most languages.

tsx

1<Direction dir="ltr">
2  <div className="p-4">
3    <P>English content flows left to right</P>
4  </div>
5</Direction>

RTL (Right-to-Left)

Right to Left

هذا المحتوى يتدفق من اليمين إلى اليسار. مناسب للغة العربية والعبرية.

tsx

1<Direction dir="rtl">
2  <div className="p-4">
3    <P>محتوى عربي يتدفق من اليمين إلى اليسار</P>
4  </div>
5</Direction>

With Components

RTL with Components

tsx

1<Direction dir="rtl">
2  <Button>اضغط</Button>
3  <Breadcrumb>
4    <BreadcrumbItem href="/">الرئيسية</BreadcrumbItem>
5    <BreadcrumbItem>الصفحة</BreadcrumbItem>
6  </Breadcrumb>
7</Direction>

Props

Prop	Type	Default	Description
dir	'ltr' \| 'rtl'	'ltr'	Text direction
children	React.ReactNode	-	Content to render in specified direction
className	string	-	Custom classes

Use with AI

Create a Next.js component using Storm UI's Direction context provider for RTL/LTR support. Import: `import { Direction } from '@storm-ds/ui'`. Mark with 'use client'. Props: dir ('ltr' or 'rtl'), children (content), className. Wraps application or section content to set text direction. Applies dir attribute and adjusts layout for right-to-left languages like Arabic, Hebrew, Farsi. Use at root level or around specific content sections. All Storm components automatically respect the direction context. Example: `<Direction dir="rtl"><App /></Direction>`, `<Direction dir="rtl"><Button>اضغط</Button></Direction>`

Item

Overview