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

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はじめに / 環境構築 / 完成形 / Tailwind
デザインシステム編色を意味で管理1デザイントークン
コア技術編Button を支える技術5cva / cn / ref / Slot / TypeScript
実践編手を動かして応用3実践演習 / 発展編 / Button からデザインシステムへ

収録章​

基礎編​

デザインシステム編​

コア技術編​

実践編​

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