Dice UI
Utilities

Direction Provider

Provides bidirectional text support (RTL/LTR) across your application.

API

Installation

CLI

npx shadcn@latest add @diceui/direction-provider

Manual

Install the following dependencies:

npm install @diceui/direction-provider

Copy and paste the following code into your project.

"use client";
 
import { Direction as DirectionPrimitive } from "radix-ui";
import type * as React from "react";
 
function DirectionProvider({
  dir,
  direction,
  children,
}: React.ComponentProps<typeof DirectionPrimitive.DirectionProvider> & {
  direction?: React.ComponentProps<
    typeof DirectionPrimitive.DirectionProvider
  >["dir"];
}) {
  return (
    <DirectionPrimitive.DirectionProvider dir={direction ?? dir}>
      {children}
    </DirectionPrimitive.DirectionProvider>
  );
}
 
const useDirection = DirectionPrimitive.useDirection;
 
export { DirectionProvider, useDirection };
"use client";
 
import { Direction as DirectionPrimitive } from "radix-ui";
import type * as React from "react";
 
function DirectionProvider({
  dir,
  direction,
  children,
}: React.ComponentProps<typeof DirectionPrimitive.DirectionProvider> & {
  direction?: React.ComponentProps<
    typeof DirectionPrimitive.DirectionProvider
  >["dir"];
}) {
  return (
    <DirectionPrimitive.DirectionProvider dir={direction ?? dir}>
      {children}
    </DirectionPrimitive.DirectionProvider>
  );
}
 
const useDirection = DirectionPrimitive.useDirection;
 
export { DirectionProvider, useDirection };
"use client";
 
import { Direction as DirectionPrimitive } from "radix-ui";
import type * as React from "react";
 
function DirectionProvider({
  dir,
  direction,
  children,
}: React.ComponentProps<typeof DirectionPrimitive.DirectionProvider> & {
  direction?: React.ComponentProps<
    typeof DirectionPrimitive.DirectionProvider
  >["dir"];
}) {
  return (
    <DirectionPrimitive.DirectionProvider dir={direction ?? dir}>
      {children}
    </DirectionPrimitive.DirectionProvider>
  );
}
 
const useDirection = DirectionPrimitive.useDirection;
 
export { DirectionProvider, useDirection };
"use client";
 
import { Direction as DirectionPrimitive } from "radix-ui";
import type * as React from "react";
 
function DirectionProvider({
  dir,
  direction,
  children,
}: React.ComponentProps<typeof DirectionPrimitive.DirectionProvider> & {
  direction?: React.ComponentProps<
    typeof DirectionPrimitive.DirectionProvider
  >["dir"];
}) {
  return (
    <DirectionPrimitive.DirectionProvider dir={direction ?? dir}>
      {children}
    </DirectionPrimitive.DirectionProvider>
  );
}
 
const useDirection = DirectionPrimitive.useDirection;
 
export { DirectionProvider, useDirection };
"use client";
 
import { Direction as DirectionPrimitive } from "radix-ui";
import type * as React from "react";
 
function DirectionProvider({
  dir,
  direction,
  children,
}: React.ComponentProps<typeof DirectionPrimitive.DirectionProvider> & {
  direction?: React.ComponentProps<
    typeof DirectionPrimitive.DirectionProvider
  >["dir"];
}) {
  return (
    <DirectionPrimitive.DirectionProvider dir={direction ?? dir}>
      {children}
    </DirectionPrimitive.DirectionProvider>
  );
}
 
const useDirection = DirectionPrimitive.useDirection;
 
export { DirectionProvider, useDirection };
"use client";
 
import { Direction as DirectionPrimitive } from "radix-ui";
import type * as React from "react";
 
function DirectionProvider({
  dir,
  direction,
  children,
}: React.ComponentProps<typeof DirectionPrimitive.DirectionProvider> & {
  direction?: React.ComponentProps<
    typeof DirectionPrimitive.DirectionProvider
  >["dir"];
}) {
  return (
    <DirectionPrimitive.DirectionProvider dir={direction ?? dir}>
      {children}
    </DirectionPrimitive.DirectionProvider>
  );
}
 
const useDirection = DirectionPrimitive.useDirection;
 
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>
  )
}

Composition

A collection of utility functions for composing event handlers and refs in React components.

Hitbox

A utility component that extends the clickable area of child elements for improved accessibility and user experience.

On this page

Installation
CLI
Manual
Usage
API Reference
DirectionProvider
useDirection