Visão geral

O DirectionProvider define o atributo dir no container para controlar a direção de leitura de blocos de conteúdo.

LTR (Left to Right)

Este texto flui da esquerda para a direita. Padrão para português, inglês e espanhol.

LTR

RTL (Right to Left)

هذا النص يتدفق من اليمين إلى اليسار. للغة العربية والعبرية والفارسية.

RTL

Import

import { DirectionProvider } from "@/components/direction"

Como funciona

O DirectionProvider adiciona o atributo dir no container. Os componentes shadcn/ui baseados em Base UI já suportam RTL nativamente via data-direction.

Padrão de implementação

Como aplicar direção a seções ou à aplicação inteira.

Aplicar RTL em um bloco

import { DirectionProvider } from "@/components/direction"

<DirectionProvider dir="rtl">
  <p>محتوى باللغة العربية</p>
</DirectionProvider>

Aplicar globalmente (layout.tsx)

// src/app/[locale]/layout.tsx
export default function LocaleLayout({ children, params }) {
  const dir = params.locale === "ar" ? "rtl" : "ltr"

  return (
    <html lang={params.locale} dir={dir}>
      <body>{children}</body>
    </html>
  )
}

Componente shadcn com suporte RTL

// Componentes que suportam dir automaticamente:
// - Breadcrumb (ChevronRight vira ChevronLeft)
// - Slider (direção invertida)
// - Select/DropdownMenu (posicionamento espelhado)

// O Popover e Dialog reposicionam automaticamente com dir="rtl"
<DirectionProvider dir="rtl">
  <Select>...</Select>
</DirectionProvider>

Props e uso

API do componente DirectionProvider.

Props

dir

"ltr" | "rtl"

Direção do texto e do layout. Obrigatório.

children

ReactNode

Conteúdo ao qual a direção será aplicada.

className

string

Classes adicionais para o container.

Suporte RTL nos componentes

Os componentes shadcn baseados em Base UI já têm suporte RTL via data-direction e classes rtl:.

Para aplicações multilíngues completas, configure dir diretamente no elemento html via i18n.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter