Direction
Sets the reading direction for the components inside it.
Direction wraps the Base UI Direction
Provider primitive. It
accepts shadcn/ui's dir spelling alongside Base UI's direction, and
re-exports useDirection so a component can read the active direction. It is
not a Port: coss/ui has no counterpart.
Installation
npx shadcn@latest add @kosori/directionExample
direction-example.tsx
مرحبا بالعالم
Reading direction: RTL'use client';
import { DirectionProvider, useDirection } from '@/components/ui/direction';
const ReadDirection = () => {
const direction = useDirection();
return (
<span className='text-muted-foreground text-sm'>
Reading direction: {direction.toUpperCase()}
</span>
);
};
const DirectionExample = () => (
<DirectionProvider direction='rtl'>
<div className='flex flex-col gap-2 rounded-lg border p-4' dir='rtl'>
<p className='font-medium'>مرحبا بالعالم</p>
<ReadDirection />
</div>
</DirectionProvider>
);
export default DirectionExample;
Usage
'use client';
import { DirectionProvider, useDirection } from '@/components/ui/direction';
const DirectionLabel = () => {
const direction = useDirection();
return <span>Reading direction: {direction}</span>;
};
const DirectionDemo = () => (
<DirectionProvider direction='rtl'>
<div dir='rtl'>
<DirectionLabel />
</div>
</DirectionProvider>
);