New

shadcn/ui を使用して構築を開始するためにできることがいくつかあります。

コンポーネントを追加する#

CLI を使用してコンポーネントをプロジェクトに追加します。

pnpmnpmyarnbun
pnpm dlx shadcn@latest add button
コピー

次に、それをインポートしてコード内で使用します。

コピーimport { Button } from "@/components/ui/button"
 
export default function Home() {
  return <Button>Click me</Button>
}

従来のコンポーネントライブラリとは異なり、shadcn/ui はコンポーネントのソースコードを components/ui/ の下のプロジェクトに直接追加します。コードはあなたが所有しており、必要に応じてカスタマイズできます。

複数のコンポーネントを一度に追加することも、使用可能なすべてのコンポーネントを追加することもできます。

pnpmnpmyarnbun
pnpm dlx shadcn@latest add button card input label
コピー

pnpmnpmyarnbun
pnpm dlx shadcn@latest add --all
コピー

コンポーネント ページですべてのコンポーネントを参照します。

テーマをカスタマイズする#

CSS ファイルでテーマを直接編集できます。CSS 変数やユーティリティクラスの使用方法について詳しくは テーマ をご覧ください。

新しいプリセットを試したい場合は、ui.shadcn.com でカスタムテーマを視覚的に作成し、プリセットコードを使用してプロジェクトに適用できます。

pnpmnpmyarnbun
pnpm dlx shadcn@latest init --preset [CODE]
コピー

ブロックを追加する#

CLI を使用してプロジェクトにブロックを追加できます。

pnpmnpmyarnbun
pnpm dlx shadcn@latest add login-03
コピー

これにより、login-03 ブロックがプロジェクトに追加されます。インポートしてコード内で使用します。

コピーimport { Login03 } from "@/components/login-03"
 
export default function Home() {
  return <Login03 />
}

レジストリからインストールする#

shadcn/ui には、成長を続けるコミュニティレジストリのエコシステムがあります。CLI を使用して、任意のレジストリ URL からコンポーネントをインストールできます。

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @[registry]/[name]
コピー

使用可能なレジストリのリストについては、レジストリディレクトリ を参照してください。

AI を使用して構築する#

shadcn/ui は AI と連携するように設計されています。AI アシスタントは、プロジェクト内のコンポーネントのソースコードを読み取り、API を理解し、それらを組み合わせてページや機能を構築できます。

以下に、試してみるプロンプトの例をいくつか示します。

• 「名前、電子メール、パスワードを入力するフォームを備えたサインアップページを作成します。」
• 「プロフィール情報を更新するためのフォームを含む設定ページを作成します。」
• 「ヘッダー、統計カード、データテーブルを備えたダッシュボードを構築します。」

shadcn スキルをインストールする#

AI アシスタントに shadcn スキルをインストールします。これにより、AI アシスタントは完全なコンポーネントレジストリ、ドキュメント、検索にアクセスできるようになります。

pnpmnpmyarnbun
pnpm dlx skills add shadcn/ui
コピー

スキル の詳細をご覧ください。

MCP サーバーに接続する#

shadcn MCP サーバーにより、AI アシスタントは完全なコンポーネントレジストリ、ドキュメント、検索にアクセスできるようになります。エディターに接続すると、最高のエクスペリエンスが得られます。

pnpmnpmyarnbun
pnpm dlx shadcn@latest mcp init
コピー

詳細については、MCP サーバー ページをご覧ください。