RTL (Vite)

Core Idea

Configura RTL em um projeto Vite: flag do CLI, atributos no index.html, DirectionProvider no main.tsx, e fonte via Fontsource (não next/font, já que não há SSR do Next).

Key Concepts

npx shadcn@latest create --template vite --rtl: cria projeto com rtl: true em components.json.
index.html: dir="rtl"/lang="ar" vão direto na tag <html> estática do arquivo, diferente do Next (que gera via JSX).
Fontsource: pacote @fontsource-variable/noto-sans-arabic instala a fonte localmente (sem depender do Google Fonts CDN em runtime).

Code Examples

<html lang="ar" dir="rtl">

O que demonstra: Atributos direcionais no HTML estático do Vite.

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

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <DirectionProvider direction="rtl">
      <App />
    </DirectionProvider>
  </StrictMode>
)

O que demonstra: DirectionProvider envolvendo o app inteiro no entry point do Vite.

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "@fontsource-variable/noto-sans-arabic";

@theme inline {
  --font-sans: "Noto Sans Arabic Variable", sans-serif;
}

O que demonstra: Registro da fonte RTL como --font-sans via @theme inline do Tailwind v4.

Key Takeaways

npm install @fontsource-variable/noto-sans-arabic é o pacote a instalar (troque por @fontsource-variable/noto-sans-hebrew para hebraico).
Depois do setup, npx shadcn@latest add <component> já aplica as transformações RTL automaticamente.
Diferente do Next, aqui não há preocupação com hydration: os atributos dir/lang no index.html já são finais.

Connects To

rtl: guia geral.
dark-mode/vite (ch080): padrão irmão de configuração raiz em Vite (ThemeProvider vs DirectionProvider).