導入

これはコンポーネントライブラリではありません。コンポーネントライブラリを構築するための方法です。

一般的なコンポーネントライブラリでは、NPM からパッケージをインストールし、コンポーネントをインポートしてアプリで使います。

このアプローチは、デザインシステムに合わせてコンポーネントをカスタマイズする必要がある場合、またはライブラリに含まれていないコンポーネントが必要な場合までは、うまく機能します。 多くの場合、ライブラリ コンポーネントをラップしたり、スタイルをオーバーライドするための回避策を作成したり、互換性のない API を備えた異なるライブラリのコンポーネントを混在させたりすることになります。

これが shadcn/ui が解決しようとしている課題です。shadcn/ui は次の原則に基づいて構築されています。

• オープンコード: コンポーネント コードの最上位層は変更のためにオープンです。
• 構成: すべてのコンポーネントは共通の構成可能なインターフェイスを使用しており、予測可能になっています。
• 配布: フラット ファイル スキーマとコマンドライン ツールにより、コンポーネントの配布が簡単になります。
• 美しいデフォルト: 慎重に選択されたデフォルトのスタイルなので、すぐに優れたデザインが手に入ります。
• AI 対応: LLM が読み、理解し、改善できるオープンコード。

オープンコード#

shadcn/ui は実際のコンポーネント コードを渡します。ニーズに合わせてコンポーネントを自由にカスタマイズ・拡張できます。これはつまり：

• 完全な透明性: 各コンポーネントがどのように構築されているかを正確に確認できます。
• 簡単なカスタマイズ: デザインと機能の要件に合わせてコンポーネントの任意の部分を変更できます。
• AI 統合: コードにアクセスできるため、LLM はコンポーネントを簡単に読み取り、理解し、さらには改善することができます。

一般的なライブラリでは、ボタンの動作を変更する必要がある場合、スタイルをオーバーライドするか、コンポーネントをラップする必要があります。 shadcn/ui を使用すると、ボタン コードを直接編集するだけです。

構成#

shadcn/ui のすべてのコンポーネントは、共通の構成可能なインターフェイスを共有します。 コンポーネントが存在しない場合は、コンポーネントを取り込んで構成可能にし、デザインシステムの残りの部分と一致して機能するようにそのスタイルを調整します。

共有された構成可能なインターフェイスは、チームと LLM の両方にとって予測可能であることを意味します。新しいコンポーネントごとに異なる API を学習しているわけではありません。サードパーティ製のものであっても。

配布#

shadcn/ui もコード配布システムです。コンポーネントのスキーマと、それらを配布するための CLI を定義します。

• スキーマ: コンポーネント、その依存関係、およびプロパティを定義するフラット ファイル構造。
• CLI: クロスフレームワークのサポートにより、プロジェクト間でコンポーネントを配布およびインストールするためのコマンドライン ツール。

スキーマを使用してコンポーネントを他のプロジェクトに配布したり、AI に既存のスキーマに基づいて完全に新しいコンポーネントを生成させたりすることができます。

美しいデフォルト#

shadcn/ui には、デフォルトのスタイルを慎重に選択したコンポーネントの大規模なコレクションが付属しています。これらは、単独で見栄えがよく、一貫したシステムとして連携してうまく機能するように設計されています。

• すぐに使える優れた見た目: 余分な作業を行わなくても、UI はすっきりとした最小限の外観になります。
• 統一されたデザイン: コンポーネントは互いに自然にフィットします。各コンポーネントは他のコンポーネントと一致するように構築されており、UI の一貫性が保たれます。
• 簡単にカスタマイズ可能: 何かを変更したい場合は、デフォルトを上書きして拡張するのが簡単です。

AI 対応#

shadcn/ui の設計により、AI ツールがコードを簡単に操作できるようになります。そのオープンコードと一貫した API により、AI モデルは新しいコンポーネントを読み取り、理解し、さらには生成することができます。

AI モデルは、コンポーネントがどのように機能するかを学習し、改善を提案したり、既存の設計と統合する新しいコンポーネントを作成したりすることもできます。