Direction
Sets reading direction for a subtree and Radix primitives.
Preview
Loading...
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/Breadcrumb";
import { DirectionProvider } from "@/components/ui/Direction";
export function DirectionDemo() {
return (
<DirectionProvider dir="ltr" className="w-full">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#home">Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Direction</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</DirectionProvider>
);
}Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/directionManual
Install the following dependencies:
pnpm install radix-uiCopy and paste the Direction component into your components/ui/Direction.tsx file.
"use client";
/**
* @description Sets reading direction for Radix primitives and the subtree.
*/
import * as React from "react";
import { Direction } from "radix-ui";
function DirectionProvider({
dir = "ltr",
children,
className,
...props
}: React.ComponentProps<typeof Direction.Provider> & {
className?: string;
}) {
return (
<Direction.Provider dir={dir} {...props}>
<div dir={dir} data-slot="direction" className={className}>
{children}
</div>
</Direction.Provider>
);
}
export { DirectionProvider };
Usage
Rtl
export const Rtl = () => {
return (
<DirectionProvider dir="rtl" className="w-full">
<p className="text-gray-12">القراءة من اليمين إلى اليسار</p>
</DirectionProvider>
);
};