RTL

shadcn/ui コンポーネントは、右から左へ (RTL) レイアウトの第一級のサポートを備えています。テキストの配置、位置、方向のスタイルは、アラビア語、ヘブライ語、ペルシア語などの言語に自動的に適応します。

コンポーネントをインストールすると、CLI は物理的な位置クラスを論理的に同等のものに自動的に変換するため、コンポーネントは LTR コンテキストと RTL コンテキストの両方でシームレスに動作します。

始める#

RTL サポートを開始するには、フレームワークを選択してください。

仕組み#

components.json に rtl: true が設定されたコンポーネントを追加すると、shadcn CLI はクラスとプロパティを RTL 互換になるように自動的に変換します。

• left-* や right-* などの物理位置クラスは、start-* や end-* などの論理同等クラスに変換されます。
• 方向を表す props は論理値を使うように更新されます。
• テキストの配置と間隔のクラスがそれに応じて調整されます。
• 対応するアイコンは rtl:rotate-180 を使って自動的に反転されます。

試してみる#

以下のリンクをクリックして、v0 で RTL をサポートする Next.js プロジェクトを開きます。

サポートされるスタイル#

CLI による自動 RTL 変換は、新しいスタイル (base-nova、radix-nova など) でのみサポートされています。

その他のスタイルについては、移行ガイドを参照してください。

推奨フォント#

最適な RTL 体験のため、対象言語を適切にサポートするフォントの使用を推奨します。Noto はこの用途に適したフォント ファミリーで、Inter や Geist ともよく合います。

RTL フォントのインストールと構成の詳細については、始める にあるフレームワークの RTL ガイドを参照してください。

アニメーション#

CLI はアニメーション クラスも処理し、物理的な方向性アニメーションを論理的に同等のものに自動的に変換します。たとえば、slide-in-from-right は slide-in-from-end になります。

これにより、ドロップダウン、ポップオーバー、ツールチップなどのアニメーションが、ドキュメントのテキストの方向に基づいて正しい方向にアニメーション化されます。

tw-animate-css に関する注意:

tw-animate-css ライブラリには、論理スライド ユーティリティが期待どおりに動作しない 既知の問題 があります。現時点では、必ず dir プロパティをポータル要素に渡してください。

コピー<Popover>
  <PopoverTrigger>開く</PopoverTrigger>
  <PopoverContent dir="rtl">
    <div>コンテンツ</div>
  </PopoverContent>
</Popover>

コピー<Tooltip>
  <TooltipTrigger>開く</TooltipTrigger>
  <TooltipContent dir="rtl">
    <div>コンテンツ</div>
  </TooltipContent>
</Tooltip>

既存のコンポーネントの移行#

RTL を有効にする前にインストールした既存コンポーネントは、次のように CLI で移行できます。

pnpmnpmyarnbun
pnpm dlx shadcn@latest migrate rtl [path]
コピー

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

pnpmnpmyarnbun
pnpm dlx shadcn@latest add direction
コピー