メインコンテンツまでスキップ

shadcn/ui Button で学ぶデザインシステム設計

このガイドについて​

React 19 / Tailwind CSS v4 / 最新の shadcn/ui に対応。shadcn/ui の Button を題材に、デザイントークン・cva・cn 関数・Radix Slot を通じて、デザインシステムに沿った再利用可能なコンポーネントの設計を、全 13 章で学びます。

このガイドを読み終えると、次のことができるようになります。

デザインシステムのベストプラクティス（デザイントークン・宣言的なバリアント・安全なカスタマイズ・合成・型安全）に沿って、再利用可能なコンポーネントを自分で設計できる。

対象読者​

  • React の基本（コンポーネント・props・state）を理解している
  • Tailwind CSS の基本的なクラスを触ったことがある
  • shadcn/ui のコードを読んで理解したい

ガイドの構造​

学習の流れ​

ガイドは 4 つのまとまりで構成され、土台から実践へ順に進みます。

まとまりテーマ章数学ぶこと
基礎編導入と土台4はじめに / 環境構築 / Button の完成形 / Tailwind の基礎
デザインシステム編色を意味で管理1デザイントークン（OKLCH）の設計
コア技術編Button を支える技術5cva / cn / ref 転送 / Radix Slot / TypeScript 連携
実践編手を動かして応用3ゼロから実装 / 他コンポーネントへの応用 / デザインシステムへ

収録章​

基礎編​

デザインシステム編​

コア技術編​

実践編​

それでは はじめに から始めましょう。