RTL

Core Idea

shadcn/ui tem suporte de primeira classe a layouts right-to-left (árabe, hebraico, persa). Ao habilitar rtl: true em components.json, o CLI transforma automaticamente classes físicas (left-*/right-*) em lógicas (start-*/end-*) na instalação de componentes.

Key Concepts

• rtl: true em components.json: flag que ativa a transformação automática do CLI ao rodar shadcn add.
• Classes físicas → lógicas: left-*/right-* viram start-*/end-*; props direcionais e alinhamento de texto também são ajustados.
• Ícones: ícones suportados (setas, chevrons) recebem rtl:rotate-180 automaticamente.
• Animações: classes de animação direcionais também são convertidas (ex: slide-in-from-right → slide-in-from-end).
• Suporte automático limitado a estilos novos: só funciona em projetos criados com shadcn create usando estilos novos (base-nova, radix-nova, etc). Estilos antigos exigem migração manual.
• npx shadcn@latest migrate rtl [path]: comando para migrar componentes já instalados antes de habilitar RTL.

Code Examples

<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent dir="rtl">
    <div>Content</div>
  </PopoverContent>
</Popover>

• O que demonstra: Workaround necessário para portais (Popover/Tooltip) por causa de bug conhecido do tw-animate-css com utilitários lógicos de slide.

<ArrowRightIcon className="rtl:rotate-180" />

• O que demonstra: Padrão manual para flipar ícone não coberto pela migração automática.

Anti-patterns

• Confiar na migração automática do CLI para Calendar, Pagination e Sidebar: esses três componentes exigem migração RTL manual (seguir a seção RTL específica de cada um).
• Não passar dir="rtl" explicitamente em portais (Popover/Tooltip content): bug conhecido do tw-animate-css faz o slide direcional falhar sem isso.

Key Takeaways

1. Fluxo recomendado para projeto novo: npx shadcn@latest create --template <framework> --rtl, que já configura components.json com rtl: true.
2. Para projeto existente: rodar npx shadcn@latest migrate rtl [path], depois npx shadcn@latest add direction e configurar DirectionProvider manualmente.
3. Fonte recomendada para RTL: família Noto (Google Fonts), combina bem com Inter/Geist.
4. Componentes fora da transformação automática (Calendar, Pagination, Sidebar) precisam de ajuste manual guiado pela doc de cada um.

Connects To

• rtl/next, rtl/vite, rtl/start: setup específico por framework.
• Direction (ch077): DirectionProvider/useDirection usados no wiring RTL.
• Pagination (ch076): exemplo de componente com seção RTL própria (prop text em Previous/Next).