Direction Provider

Installation

pnpm dlx shadcn@latest add @diceui/direction-provider

Usage

import { DirectionProvider } from "@/components/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>
  )
}

Notes

This is a wrapper around Base UI's DirectionProvider for consistency with existing DiceUI APIs. It may be deprecated in future versions in favor of direct Base UI or shadcn/ui implementations.