Next.js

创建一个支持 RTL 的新的 Next.js 项目。

开始一个新项目？ 使用 shadcn/create 来创建一个完全配置好的 Next.js 应用，包含自定义主题、Base UI 或 Radix 以及图标库。

创建项目

使用 --rtl 标志和 next 模板创建一个新的项目。

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


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

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

components.json

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

添加 DirectionProvider

使用带有 direction="rtl" 属性的 DirectionProvider 组件包裹你的应用。

然后在 html 标签上添加 dir="rtl" 和 lang="ar" 属性。将 lang="ar" 更新为你的目标语言。

app/layout.tsx

import { DirectionProvider } from "@/components/ui/direction"
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ar" dir="rtl">
      <body>
        <DirectionProvider direction="rtl">{children}</DirectionProvider>
      </body>
    </html>
  )
}

添加字体

为了获得最佳的 RTL 体验，我们建议使用对目标语言有良好支持的字体。Noto 是非常适合的字体家族，它与 Inter 和 Geist 字体搭配良好。

app/layout.tsx

import { Noto_Sans_Arabic } from "next/font/google"
 
import { DirectionProvider } from "@/components/ui/direction"
 
const fontSans = Noto_Sans_Arabic({
  subsets: ["arabic"],
  variable: "--font-sans",
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ar" dir="rtl" className={fontSans.variable}>
      <body>
        <DirectionProvider direction="rtl">{children}</DirectionProvider>
      </body>
    </html>
  )
}

对于其他语言，如希伯来语，你可以使用 Noto_Sans_Hebrew 字体。

添加组件

现在你可以开始向项目添加组件了。CLI 会帮你处理 RTL 支持。


pnpm dlx shadcn@latest add item

RTL Vite

创建项目添加 DirectionProvider 添加字体添加组件