shadcn
shadcn/uiとは？
Radix UIとTailwind CSSを活用したReact向けコンポーネント集。コードを所有しながらUIを組み立てやすい。
最終更新日: 2026-07-16 / レビュー状態: 未レビュー
30秒でわかる要点
Radix UIとTailwind CSSを活用したReact向けコンポーネント集。コードを所有しながらUIを組み立てやすい。
強み
- ・コピーして所有できるコード
- ・Next.jsとの相性
- ・Tailwind CSSで調整しやすい
関連コンポーネント
ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。テキスト入力（Input）テキスト入力（Input）は、ユーザーがテキストを入力するための単行・複数行フォームフィールド。バリデーション状態（エラー・無効）の表現も含む。カード（Card）カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。テーブル（Table）テーブル（Table）は、構造化されたデータを行と列で表示するコンポーネント。ソート・フィルタ・ページネーション機能と組み合わせて使用される。トースト（Toast）トースト（Toast）は、画面の端に短時間表示されるフィードバックメッセージ。操作の成功・失敗・情報を短く伝える。一定時間後に自動的に消える。
設計・実装リソース
FAQ
shadcn/uiはどんなUI実装で参考にするとよいですか？
ReactやNext.jsで、コンポーネントコードを自分のプロジェクトに取り込み、Tailwind CSSで調整しながら運用したいときに参考になります。
shadcn/uiは通常のコンポーネントライブラリと何が違いますか？
パッケージから読み込むよりも、コードをプロジェクト内にコピーして所有する考え方が中心です。細かな変更やデザイン調整に向いています。
shadcn/uiを参考にするときの注意点は？
見た目だけでなくRadix UI由来のアクセシビリティ、状態管理、キーボード操作を確認し、プロダクトのブランドに合わせて調整します。
運営・更新・参照元
- 著者 / 運営
- Component Gallery 編集部
- 最終更新日
- 2026-07-16
- レビュー状態
- 未レビュー
参照元
- shadcn/ui参照確認日: 2026-07-16
- W3C Web Content Accessibility Guidelines (WCAG)参照確認日: 2026-07-16
- WAI-ARIA Authoring Practices Guide参照確認日: 2026-07-16
- MDN Web Docs - Accessibility参照確認日: 2026-07-16