UIライブラリを使う（shadcn/ui）
なぜ学ぶか： AIに「モダンなUIで」と頼むと、高確率でshadcn/uiという部品集が使われます。プロジェクトに謎のcomponents/uiフォルダができていたら、それです。仕組みを知っておきましょう。
まずはこの例を見てみましょう
// AI が生成しがちな shadcn/ui のコードimport { Button } from "@/components/ui/button";import { Card, CardContent } from "@/components/ui/card"; function ConfirmPanel() { return ( <Card> <CardContent className="flex gap-2"> <Button>変更を保存</Button> <Button variant="outline">キャンセル</Button> </CardContent> </Card> );}
import元が@/components/ui/…（自分のプロジェクト内）なのが特徴。部品のコードが手元にコピーされています。
UIライブラリ＝出来合いの部品集
ボタン・モーダルなど、正しく作るのが大変な部品を借りてきます。デザインの一貫性が手に入ります。
shadcn/uiは「コピー方式」
普通のライブラリと違い、部品のコードをcomponents/ui/にコピーして使います。だから自由に改造できます。
中身は精読しなくていい
components/ui/の中身は複雑に見えますが、それが正常です。使う側は「どう使うか（props）」だけ分かれば十分です。
公式ドキュメント
ステップ 1 / 3
※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。