Direction

Scopes text direction for Gaudi controls that need directional keyboard and placement behavior.

CoreLayout & Containers@gaudi/design-system/core/DirectionView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { DirectionProvider } from '@gaudi/design-system/core/Direction';

Usage

import { DirectionProvider } from '@gaudi/design-system/core/Direction';
<DirectionProvider dir='rtl'><div dir='rtl'>{controls}</div></DirectionProvider>

Examples

Playground

Storybook

API

3 props

Accessibility

Set the same direction on the surrounding DOM so text flow and control behavior agree. Nested providers may override the inherited direction.

AccordionRich disclosure for FAQs, settings, member directories, nested help, and guided setup. Eleven patterns use Gaudi tokens, icons, avatars, cards, and pills.12 examples CarouselCarousel renders standard feature slides and editorial card rails.4 examples ResizableResizable panes with accessible separators and bounded panel sizes.2 examples ScrollAreaContained scrolling with themed scrollbars and optional smooth wheel motion for article reading.2 examples SortableReorder lists and grids with drag handles, keyboard controls and cancellation.4 examples