Utilities
Installation
CLI
npx shadcn@latest add @diceui/direction-providerManual
Install the following dependencies:
npm install @diceui/direction-providerCopy and paste the following code into your project.
"use client";
import {
DirectionProvider as GlobalDirectionProvider,
useDirection,
} from "@radix-ui/react-direction";
import type * as React from "react";
function DirectionProvider(
props: React.ComponentProps<typeof GlobalDirectionProvider>,
) {
return <GlobalDirectionProvider {...props} />;
}
export {
DirectionProvider,
//
useDirection,
};Usage
import { DirectionProvider } from "@diceui/direction-provider"
export default function App() {
return (
<DirectionProvider dir="ltr">
<YourApp />
</DirectionProvider>
)
}API Reference
DirectionProvider
Manages direction context for the useDirection hook.
Prop
Type
useDirection
A hook to access the current direction.
import { useDirection } from "@/components/direction-provider"
function Component() {
const dir = useDirection()
return (
<Button dir={dir}>
Do a kickflip
</Button>
)
}