shadcn/ui は、Tailwind CSS を活用した美しい UI コンポーネント集として注目を集めており、これをベースとしたコンポーネントライブラリも数多く公開されています。そこで本記事では、shadcn/ui ベースの拡張コンポーネント集を紹介したいと思います。
Tailark
- Tailwind・shadcn/ui を基盤に「即使える UI」を豊富に揃えたテーマ集
- 落ち着いた配色とシンプルなレイアウトで、管理画面・SaaS に向く
- コード構造が整理されているので、Next.js プロジェクトへの組み込みが容易
- 有料版あり。無料コンポーネントも多数ありそれでも十分活用可。
ShadcnStudio
https://shadcnstudio.com/blocks
- LP サイトにすぐ実装できそうな汎用性高いデザイン
- Dashboard や Eコマース実務向けの UI が強い
- デザインはシンプルで、どのようなデザインにも対応できそう
Shadcnblocks
- 完成されたページブロックが豊富で LP サイトに便利
- ページ構築スピードを最優先にした構造
- コンポーネントの種類多く、どのようなサイトにも応用可
Aceternity
- モーションやグラデーションを多用し「派手め」でモダンな UI
- Landing page 向けのセクション（Hero, CTA など）が充実
- 開発者がカスタムアニメーションを組み込みやすい構成
- 有料コンテンツ多い印象。
AI Elements
- AI プロダクト向けのチャット UI・アシスタント UI 等が中心
- AI 系クローンサイトに最適化されたコンポーネントは汎用性高
- Vercel 製でドキュメントサイトも充実
React Bits
- デザインセンス高いアニメーション UI 多く汎用性も有り
- コピペでそのまま使える UI 多く、導入コストが低い
- LP サイトにも企業サイトにも使える印象に残りやすい UI 多数
Magic UI
- 立体感のあるアニメーション・カード・インタラクションが揃っている
- マーケティング系ページ向けビジュアル重視の設計で採用サイト多数
- プレミアムな見た目を維持しつつ、コードは Tailwind ベースで扱いやすい
SKIPER UI
- なめらかで芸術的なアニメーションの UI 多数
- 高級感ある UI コンポーネント多く、ブランディングサイト向け良い
- ビジュアルで興味を引き付けられる UI が特徴的。インパクト大きい
Kokonut UI
- Motion を使用したアニメーションがとてもユニーク
- 動きのある UI でマウスホバーやクリックアクションが楽しい
- テキストアニメーションも豊富で面白味のある UI 集になっている
coss.com origin
- ダッシュボード構築向けに最適な UI コンポーネント多数
- テーブルやカレンダー、セレクトボックスなど業務系 UI が充実
- シンプルかつ UI のバリエーション多く、汎用的ですぐ使える
Dev Portfolio
- 個人ポートフォリオ向けのセクション（Hero, Projects, Skills）が豊富
- 軽量で読み込みが速く、SEO に配慮した設計
- デザイナーがいなくてもプロっぽい見た目に仕上がる
Components.work
- 実用的な UI コンポーネントを“問題解決型”で提供
- ソースが簡潔で、カスタマイズしやすい構造
- 長期運用向けの保守しやすいパターンが多い
Motion Primitives
https://motion-primitives.com/
- アニメーションに特化したコンポーネント群（Framer Motion 前提）
- モーダル・スライダー・アコーディオンなどアニメ付き UI の品質が高い
- コードがパターン化されているため、実装コストを大幅に削減できる