「designsystem」タグのついた14記事

Button で学んだデザイントークン・cva・cn・Slot・型のパターンを、デザイントークン / プリミティブ / パターンの 3 階層からなる 1 つのデザインシステムとしてまとめる最終章。チーム運用のポイントと次のステップも紹介します。

shadcn/ui の cn 関数を構成する clsx と tailwind-merge の内部挙動を、実際の動作結果とともに掘り下げる章。falsy の除外、conflict group による競合解決、clsx → twMerge の順序の理由を学びます。

この章では、cva（class-variance-authority）によるスタイルバリアントの宣言的な管理について学びます。cva が内部で何をしているのか、競合解決を「やらないこと」まで理解します。

この章では、radix-ui の Slot と asChild パターンについて学びます。スタイルを保ったままレンダリングされる HTML 要素を差し替える「合成（composition）」の考え方を解説します。

この章では、ref を使って DOM 要素にアクセスする方法について学びます。React 19 で ref が通常の prop になった新しい書き方を本筋に、従来の forwardRef も押さえます。

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

Tailwind CSS のユーティリティファーストの考え方を、shadcn/ui Button の実クラス列を分解しながら学ぶ章。レイアウト・状態修飾子 (hover / focus-visible / disabled)・スペーシングスケール・デザイントークンの入り口を解説します。

この章では、shadcn/ui の Button を支える TypeScript の型について学びます。React.ComponentProps・VariantProps・交差型による props 定義と、React 19 で forwardRef のジェネリクスが不要になった理由を解説します。

bg-primary の色がどこから来るのかを解説する章。デザイントークンの 2 階層（プリミティブ / セマンティック）、OKLCH カラー、Tailwind v4 の @theme inline によるトークン定義、ライト / ダークテーマの仕組みを学びます。

本書で組み立てる shadcn/ui Button コンポーネントの完成形を先に確認する章。cva・cn・Radix Slot・デザイントークン・React 19 の ref など、使われている技術の全体像と基本的な使い方をつかみます。

素の button から始めて、Tailwind のデザイントークン・cva・cn・asChild (Slot)・TypeScript の型を 1 ステップずつ重ね、shadcn/ui 流の Button コンポーネントをゼロから完成させる実践演習。success バリアントやローディング状態の追加課題つき。

shadcn/ui の Button を題材にデザインシステム設計を学ぶガイドの導入章。本書の目的・対象読者・全 13 章の構成と、なぜ Button がコンポーネント設計の題材として最適なのかを説明します。

Vite + React 19 + TypeScript + Tailwind CSS v4 で shadcn/ui Button 学習用の開発環境を構築する章。cva・clsx・tailwind-merge・radix-ui の導入、cn 関数の作成、パスエイリアスの設定までを手順で解説します。

Button で学んだ cva・cn・Slot・デザイントークンのパターンを Badge・Input・Card・Alert に応用する章。コンポーネントごとのパターン選択ガイドと設計のベストプラクティスをまとめます。