Direction

Core Idea

A provider component (DirectionProvider) that sets text direction (ltr/rtl) app-wide, essential for supporting RTL languages (Arabic, Hebrew, Persian) across all shadcn/ui components.

Key Concepts

DirectionProvider: wraps the app; accepts a direction prop ("ltr" or "rtl").
useDirection: hook returning the current direction from context, for conditional logic in custom components.
Should be paired with dir="rtl" on <html> for correct native rendering.

Code Examples

<html dir="rtl">
  <body>
    <DirectionProvider direction="rtl">
      {/* Your app content */}
    </DirectionProvider>
  </body>
</html>

O que demonstra: Configuração raiz de direção, sincronizando o atributo HTML nativo com o provider React.

import { useDirection } from "@/components/ui/direction"

function MyComponent() {
  const direction = useDirection()
  return <div>Current direction: {direction}</div>
}

O que demonstra: Leitura da direção atual dentro de um componente para lógica condicional própria.

Key Takeaways

DirectionProvider é a base de todo o suporte RTL do shadcn/ui, cada página de componente tem uma seção RTL que assume este provider configurado.
Sempre sincronize dir no <html> com o direction do provider, senão scrollbars/inputs nativos do browser ficam inconsistentes com os componentes React.
Instalação manual requer @base-ui/react.
Use useDirection() em vez de reimplementar lógica de contexto para componentes customizados que precisem se adaptar a RTL.

Connects To

RTL guide (/docs/rtl): guia completo de configuração RTL que usa este componente como base.
Todos os componentes com seção RTL (Kbd, Collapsible, Toggle, Toggle Group, Pagination etc.): dependem do DirectionProvider estar configurado.