Direction

Directional context for left-to-right and right-to-left layouts.

Examples

StartLeft to right

StartRight to left

Installation

Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.

Install Direction

pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/direction.json'

Usage

A complete example using the installed component and hook paths.

Direction usage

"use client";import { Badge } from "@/components/ui/badge";import { DirectionProvider } from "@/components/ui/direction";import { Separator } from "@/components/ui/separator";const DirectionPreview = function DirectionPreview() {    return (      <div className="w-full space-y-4">        <DirectionProvider direction="ltr">          <div dir="ltr" className="flex gap-2">            <Badge variant="outline">Start</Badge>            <span className="text-sm">Left to right</span>          </div>        </DirectionProvider>        <Separator />        <DirectionProvider direction="rtl">          <div dir="rtl" className="flex gap-2">            <Badge variant="outline">Start</Badge>            <span className="text-sm">Right to left</span>          </div>        </DirectionProvider>      </div>    );  };export default function Demo() {  return <DirectionPreview />;}

API Reference

Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.

DirectionProvider

Re-exported primitive; see the upstream API reference.

useDirection