106k
New

Vite

PreviousNext

创建一个支持 RTL 的新 Vite 项目。

创建项目

使用 --rtl 标志和 vite 模板创建新项目。

如果你已经使用 shadcn/create 创建了项目，可以跳过此步骤。

pnpm dlx shadcn@latest create --template vite --rtl

这将创建一个带有 rtl: true 标志的 components.json 文件。

components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "base-nova",
  "rtl": true
}

添加 DirectionProvider

在你的 index.html 文件中，给 html 标签添加 dir="rtl" 和 lang="ar" 属性。将 lang="ar" 替换为你的目标语言。

index.html
<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

然后在你的 main.tsx 文件中，用带有 direction="rtl" 属性的 DirectionProvider 组件包裹你的应用：

src/main.tsx
import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
 
import { DirectionProvider } from "@/components/ui/direction"
 
import App from "./App"
 
import "./index.css"
 
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <DirectionProvider direction="rtl">
      <App />
    </DirectionProvider>
  </StrictMode>
)

添加字体

为了获得最佳的 RTL 体验，我们推荐使用对你的目标语言有良好支持的字体。 Noto 是一个非常好的字体系列，它与 Inter 和 Geist 配合良好。

使用 Fontsource 安装字体：

pnpm add @fontsource-variable/noto-sans-arabic

在你的 index.css 文件中导入该字体：

src/index.css
@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;
}

对于其他语言，例如希伯来语，你可以使用 @fontsource-variable/noto-sans-hebrew。

添加组件

现在你已经准备好向项目中添加组件了。CLI 会帮你处理 RTL 支持。

pnpm dlx shadcn@latest add item