logo hsb.horse
← 用語集一覧に戻る

Glossary

shadcn/ui

shadcn/uiは、Radix UIとTailwind CSSをベースにしたReact向けコンポーネント集。コードを直接プロジェクトにコピーして使うスタイルが特徴。

公開日: 更新日:

shadcn/uiは、Radix UIとTailwind CSSをベースにしたReact向けUIコンポーネント集。 npmパッケージとしてインストールするのではなく、コンポーネントのコードをプロジェクトに直接コピーして使う設計が特徴。

特徴

  • コードオーナーシップが自分にある(カスタマイズが自由)
  • Radix UI のアクセシビリティ対応コンポーネントが基盤
  • Tailwind CSS でスタイリング

参考

関連ライブラリ

shadcn/ui のコンポーネントを拡張・補完するエコシステム。

  • Magic UI — アニメーション重視のコンポーネント集
  • Animate UI — Motion アニメーション付きコンポーネント
  • Aceternity UI — ビジュアルインパクトのあるコンポーネント
  • React Bits — インタラクティブなUIパーツ集
  • SmoothUI — Tailwind + Motion のコンポーネント
  • Kokonut UI — オープンソースのコンポーネント集
  • blocks.so — shadcn/ui 向けブロックコンポーネント(60+)
  • Tailark — マーケティング向けブロック集

実務メモ

shadcn/ui は、shadcn、react、ui、tailwindcss の文脈で出てくることが多い。辞書的な定義だけでなく、この語で何を短く言い表したいのかまで揃えておくと会話がぶれにくい。

近い言葉と混ぜると説明が曖昧になりやすいので、対象、役割、使う場面を一段だけ具体化して捉えるのが楽。用語集では、その入口として押さえておくと十分。