逆引きリファレンス
「やりたいこと」からUIライブラリのAPIを逆引きできるリファレンス集。 コード抜粋とライブラリ横断の比較テーブル付きで解説しています。 動くデモを見たい場合は各カテゴリページをご覧ください。
UIコンポーネントライブラリ
対象: Mantine・Ant Design・shadcn/ui・MUI
テーマ・カラーの変更
プライマリーカラー・ダークモード・CSS変数・テーマネストの設定を4ライブラリで横断比較
サイズ・間隔の調整
サイズバリアント・グローバルスケール・密度モード・レスポンシブ対応の設定を4ライブラリで横断比較
バリデーション・エラー表示
インラインエラー・リアルタイムバリデーション・React Hook Form・Zod連携を4ライブラリで横断比較
モーダル・ダイアログの制御
開閉制御・オーバーレイ挙動・アニメーション・ネスト・フォーカストラップを4ライブラリで横断比較
フォームの状態管理
controlled/uncontrolled・React Hook Form・Zod連携・送信状態管理を4ライブラリで横断比較
アイコンの差し替え・カスタマイズ
アイコンライブラリ統合・サイズ/色変更・ボタン内配置・カスタムSVGを4ライブラリで横断比較
UIコンポーネントのレスポンシブ対応
ブレークポイント・レスポンシブグリッド・表示切替・useMediaQueryを4ライブラリで横断比較
アクセシビリティ（a11y）
ARIA属性・キーボード操作・フォーカス管理・スクリーンリーダー対応を4ライブラリで横断比較
データ可視化ライブラリ
対象: Recharts・ECharts・Plotly.js・Chart.js・Nivo・ApexCharts
ツールチップのカスタマイズ
カスタムHTML・フォーマッタ・表示位置制御など、ホバー時ポップアップの設定を6ライブラリで横断比較
色・スタイルのカスタマイズ
カラーパレット・グラデーション・透明度（opacity）・条件付き色分けの設定を6ライブラリで横断比較
軸（Axis）の設定
ラベルフォーマット・対数スケール・複数軸・グリッド線スタイルの設定を6ライブラリで横断比較
レスポンシブ対応
コンテナ幅への自動追従・アスペクト比の維持・ブレークポイント別設定を6ライブラリで横断比較
アニメーション・トランジション
初期描画アニメーション・データ更新トランジション・イージング関数の指定を6ライブラリで横断比較
凡例（Legend）の配置・スタイル
配置位置・カスタムアイコン・系列トグル・スクロール対応・カスタムHTML設定を6ライブラリで横断比較
データラベルの表示
値の表示・表示位置制御・フォーマッタ関数・重なり防止・条件付き表示を6ライブラリで横断比較
クリックイベント・インタラクション
クリック・ホバー・凡例クリック・ブラシ選択・ズームなどのイベントハンドリングを6ライブラリで横断比較
グリッド線のカスタマイズ
水平/垂直グリッドの個別制御・線スタイル・リファレンスライン・ストライプ背景を6ライブラリで横断比較
Zenn