技術用語

shadcn/ui

シャドシーエヌユーアイ

React 用の UI コンポーネント集です。npm 配布ではなく CLI でコードを直接コピーする方式です。

体験区分：触った推奨読者レベル：Level 3-4

Radix UI と Tailwind CSS（F-16）を組み合わせたコンポーネントを提供します。1 コマンドでコードがプロジェクトにコピーされるため、そのまま自由にカスタマイズできます。

Next.js（F-11）や Astro（F-17）で UI を組み立てる場面で登場します。AI アシスタントに「shadcn/ui で作って」と伝えると対応できるため、バイブコーディングでも定番の指定です。

構造図

2026.04·ready

「shadcn の Button を `add` してから画面を組んでいくと早いです。」

shadcn/uiの見方

297

この用語の見どころ

役割

React 向け UI コンポーネントをコピー方式で提供します。

うれしさ

コードが自分のリポジトリに入るので自由に改変できます。

注意点

npm 依存ではないためバージョン追従は手動になります。

どこで役立つか

React で UI を素早く組みたい場面に向きます。

はじめに

コピー配布方式の意味を押さえると使い方が掴めます。

深掘り先

Radix UI、Tailwind CSS、v0

非エンジニアのつまずき

私のコメント

開発フローでの位置

プロジェクト初期化

→

shadcn/ui 導入

→

コンポーネント追加

→

カスタマイズ

→

AI との連携