1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

shadcn/ui で構築された UI コンポーネント&デザインテーマ集 【まとめ】

Last updated at Posted at 2025-12-10

shadcn/ui は、Tailwind CSS を活用した美しい UI コンポーネント集として注目を集めており、これをベースとしたコンポーネントライブラリも数多く公開されています。そこで本記事では、shadcn/ui ベースの拡張コンポーネント集を紹介したいと思います。

Tailark

https://tailark.com/

  • Tailwind・shadcn/ui を基盤に「即使える UI」を豊富に揃えたテーマ集
  • 落ち着いた配色とシンプルなレイアウトで、管理画面・SaaS に向く
  • コード構造が整理されているので、Next.js プロジェクトへの組み込みが容易
  • 有料版あり。無料コンポーネントも多数ありそれでも十分活用可。

ShadcnStudio

https://shadcnstudio.com/blocks

  • LP サイトにすぐ実装できそうな汎用性高いデザイン
  • Dashboard や Eコマース実務向けの UI が強い
  • デザインはシンプルで、どのようなデザインにも対応できそう

Shadcnblocks

https://www.shadcnblocks.com/

  • 完成されたページブロックが豊富で LP サイトに便利
  • ページ構築スピードを最優先にした構造
  • コンポーネントの種類多く、どのようなサイトにも応用可

Aceternity

https://ui.aceternity.com/

  • モーションやグラデーションを多用し「派手め」でモダンな UI
  • Landing page 向けのセクション(Hero, CTA など)が充実
  • 開発者がカスタムアニメーションを組み込みやすい構成
  • 有料コンテンツ多い印象。

AI Elements

https://ai-sdk.dev/elements

  • AI プロダクト向けのチャット UI・アシスタント UI 等が中心
  • AI 系クローンサイトに最適化されたコンポーネントは汎用性高
  • Vercel 製でドキュメントサイトも充実

React Bits

https://www.reactbits.dev/

  • デザインセンス高いアニメーション UI 多く汎用性も有り
  • コピペでそのまま使える UI 多く、導入コストが低い
  • LP サイトにも企業サイトにも使える印象に残りやすい UI 多数

Magic UI

https://magicui.design/

  • 立体感のあるアニメーション・カード・インタラクションが揃っている
  • マーケティング系ページ向けビジュアル重視の設計で採用サイト多数
  • プレミアムな見た目を維持しつつ、コードは Tailwind ベースで扱いやすい

SKIPER UI

https://skiper-ui.com/

  • なめらかで芸術的なアニメーションの UI 多数
  • 高級感ある UI コンポーネント多く、ブランディングサイト向け良い
  • ビジュアルで興味を引き付けられる UI が特徴的。インパクト大きい

Kokonut UI

https://kokonutui.com/

  • Motion を使用したアニメーションがとてもユニーク
  • 動きのある UI でマウスホバーやクリックアクションが楽しい
  • テキストアニメーションも豊富で面白味のある UI 集になっている

coss.com origin

https://coss.com/origin

  • ダッシュボード構築向けに最適な UI コンポーネント多数
  • テーブルやカレンダー、セレクトボックスなど業務系 UI が充実
  • シンプルかつ UI のバリエーション多く、汎用的ですぐ使える

Dev Portfolio

https://chanhdai.com/

  • 個人ポートフォリオ向けのセクション(Hero, Projects, Skills)が豊富
  • 軽量で読み込みが速く、SEO に配慮した設計
  • デザイナーがいなくてもプロっぽい見た目に仕上がる

Components.work

https://components.work/

  • 実用的な UI コンポーネントを“問題解決型”で提供
  • ソースが簡潔で、カスタマイズしやすい構造
  • 長期運用向けの保守しやすいパターンが多い

Motion Primitives

https://motion-primitives.com/

  • アニメーションに特化したコンポーネント群(Framer Motion 前提)
  • モーダル・スライダー・アコーディオンなどアニメ付き UI の品質が高い
  • コードがパターン化されているため、実装コストを大幅に削減できる
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?