2026 年 1 月 - RTL サポート
shadcn CLI は、物理 CSS クラスを論理的に同等のものに自動的に変換することにより、RTL (右から左) レイアウトをサポートするようになりました。
shadcn/ui は、右から左へ (RTL) レイアウトのファーストクラスのサポートを追加しました。コンポーネントは、アラビア語、ヘブライ語、ペルシア語などの言語に自動的に適応します。
これは、shadcn/ui コンポーネント だけでなく、shadcn レジストリで配布されているコンポーネントでも機能します。
RTL に対する当社のアプローチ
従来、RTL をサポートするコンポーネント ライブラリは、論理クラスが組み込まれた状態で出荷されます。つまり、LTR レイアウトのみをビルドする場合でも、全員が ms-4 や start-2 などのクラスを使用する必要があります。
私たちは別のアプローチをとりました。 shadcn CLI はインストール時にクラスを変換するため、論理クラスは実際に必要な場合にのみ表示されます。 RTL 用に構築していない場合は、ml-4 や left-2 などの使い慣れたクラスを使用します。 RTL を有効にすると、CLI が変換を処理します。
必要になるまで RTL を学ぶ必要はありません。
仕組み
components.json に rtl: true が設定されたコンポーネントを追加すると、CLI は、ml-4 や text-left などの物理 CSS クラスを、ms-4 や text-start などの論理同等クラスに自動的に変換します。
left-*およびright-*のような物理位置クラスは、start-*およびend-*になります。ml-*およびpr-*のようなマージンおよびパディング クラスは、ms-*およびpe-*になります。text-leftのようなテキスト配置クラスはtext-startになります。- 方向プロパティが論理値を使用するように更新されました。
- サポートされているアイコンは、
rtl:rotate-180を使用して自動的に反転されます。 slide-in-from-leftのようなアニメーションはslide-in-from-startになります。
各コンポーネントの RTL 例
すべてのコンポーネントに RTL サンプルを追加しました。ライブ プレビューとコードは、各 コンポーネント ページ にあります。
CLI の更新
新しいプロジェクト: 最初から RTL を有効にするには、--rtl フラグを init または create とともに使用します。
既存のプロジェクト: migrate rtl コマンドを使用してコンポーネントを移行します。
これにより、ui ディレクトリ内のすべてのコンポーネントが論理クラスを使用するように変換されます。特定のパスまたはグロブ パターンを渡すこともできます。
試してみてください
以下のリンクをクリックして、v0 で RTL をサポートする Next.js プロジェクトを開きます。
