Tailwind CSS でコンポーネントライブラリを選ぶとき、「daisyUI」「shadcn/ui」「Flowbite」「Preline UI」など候補が乱立し、どれを採用すべきか判断に迷う場面が増えています。特に素の Tailwind の冗長なクラス名連結を短縮したい、複数フレームワークで見た目を統一したい、JavaScript を追加せずに済ませたいといった要求が重なると、選定基準の設計自体が難しくなります。
daisyUI は Tailwind CSS のプラグインとして btn や card といったセマンティックなコンポーネントクラスを提供する OSS で、GitHub で 41,578 スターを獲得している人気プロジェクトです（2026-07-08 時点）。ただし「人気があるから採用」という判断は、プロジェクトの前提条件（対応フレームワーク・JS 依存の許容度・既存 Tailwind バージョン）との整合性を確認しないままだと、後から移行コストや設計方針の齟齬に直面する原因になります。
本記事では、daisyUI が「なぜ選ばれるのか」「shadcn/ui や Flowbite とどう違うのか」「v5 の破壊的変更でどこまで影響が出るのか」を、公式ドキュメント・README・公式サイトの記述をもとに整理します。動作検証やインストール体験ではなく、公開されているドキュメントに基づく事実の整理として、採用判断の材料になる情報のみを取り上げます。
対象読者は Tailwind CSS の基本を理解しており、コンポーネントライブラリの技術選定を担う立場のエンジニアを想定しています。読み終えた時点で、自プロジェクトに daisyUI を採用すべきかどうかの判断軸が明確になり、次のアクション（PoC 導入・移行コスト試算・別 OSS との追加比較）に進めることを目指します。
daisyUI とは何か（Tailwind CSS プラグイン型 OSS）
daisyUI は Tailwind CSS のプラグインとして動作し、btn・card・badge といったセマンティックなコンポーネントクラスを追加する OSS です。GitHub のリポジトリ saadeghi/daisyui で公開されており、公式サイトは daisyui.com です。
素の Tailwind CSS ではボタン 1 つを作るにも十数個のユーティリティクラスを連結する必要がありますが、daisyUI を導入すると class="btn btn-primary" のような短い記述に置き換えられます。JavaScript を一切出力せず、CSS のみで完結する設計のため、React・Vue・Svelte・Astro・Rails など任意のフレームワークに後付けで導入できる点が特徴です。
リポジトリ基本情報（2026-07-08 時点）
gh api /repos/saadeghi/daisyui で取得した基本情報は以下のとおりです。
項目 | 値 |
|---|---|
スター数 | 41,578 |
フォーク数 | 1,649 |
ライセンス | MIT |
主言語 | Svelte（ドキュメントサイトが SvelteKit ベース） |
最終 push | 2026-07-08 |
リポジトリ状態 | archived: false / fork: false（本家リポジトリ、アクティブメンテナンス中） |
archived / fork がいずれも false であること、最終 push 日が本記事執筆時点から近いことから、深掘り対象として問題のないアクティブな OSS として扱えます。
daisyUI の位置づけ（Tailwind CSS プラグインとしての立場）
daisyUI は「Tailwind CSS を置き換える」プロダクトではなく、「Tailwind CSS の上に載る」プラグインです。Tailwind 側のユーティリティクラスはそのまま利用でき、daisyUI が追加するのはコンポーネントレベルのセマンティッククラスと、テーマの変数定義のみです。
このため、既存の Tailwind プロジェクトへの後付け導入がしやすく、必要な箇所だけ daisyUI のセマンティッククラスに置き換える段階的な移行が可能です。また、Tailwind の哲学である「ユーティリティファースト」を否定するものではなく、頻出パターン（ボタン・カード・モーダル等）を短縮する補助として位置づけられます。
daisyUI が解決する課題
素の Tailwind CSS でボタンを実装すると、色・パディング・角丸・ホバー時の挙動・フォーカスリング・遷移など、装飾のたびに 10 個以上のユーティリティクラスを連結することになります。プロジェクト規模が大きくなるほど、この冗長さは HTML の可読性とメンテナンス性を圧迫します。
daisyUI はこの冗長さをセマンティッククラス（btn, card, alert 等）で短縮するアプローチを取ります。公式サイトによれば、以下の削減効果が示されています。
- クラス名を最大 88% 削減
- 生成される HTML サイズを最大 79% 削減
- 68 コンポーネント／600+ ユーティリティクラスを内蔵
- ゼロ JavaScript 依存
（出典: daisyUI 公式サイト）
この数値は公式サイトのトップページで主張されているもので、素の Tailwind で長大に連結されるクラス列を daisyUI のセマンティッククラスに置き換えた場合の比較として提示されています。
セマンティッククラスによる短縮の考え方
daisyUI のセマンティッククラスは「コンポーネントの意味」を表す名前になっています。btn はボタン、card はカード、alert はアラートといった具合に、HTML を読んだときに UI 要素の役割が即座に分かる形です。
この設計は、CSS フレームワーク時代の Bootstrap のようなクラス設計思想と近い一方、Tailwind のユーティリティクラスと自由に組み合わせられる柔軟性を保持しています。たとえば btn btn-primary btn-lg mt-4 のように、daisyUI のコンポーネントクラスと Tailwind のマージンユーティリティを混在させる書き方が可能です。
daisyUI 5 の主要機能とテーマ設計
daisyUI 5 では、コンポーネント数・テーマ数・カスタマイズ性の 3 つの軸で機能が拡張されています。以下、代表的な機能を整理します。
7 カテゴリ 68 コンポーネント
daisyUI 5 は 7 つのカテゴリに分類された 68 個のコンポーネントを提供します（出典: daisyUI Components）。
カテゴリ | 代表コンポーネント |
|---|---|
Actions | Button, Dropdown, FAB/Speed Dial, Modal, Swap, Theme Controller |
Data Display | Accordion, Avatar, Aura, Badge, Card, Carousel, Chat Bubble, Collapse, Countdown, Diff, Kbd, List, Stat, Status, Table, Timeline |
Navigation | Breadcrumbs, Dock, Link, Megamenu, Menu, Navbar, Pagination, Steps, Tabs |
Feedback | Alert, Loading, Progress, Radial Progress, Skeleton, Toast, Tooltip |
Data Input | Calendar, Checkbox, Fieldset, File Input, Filter, Label, Radio, Range, Rating, Select, Text Input, Textarea, Toggle, Validator, OTP |
Layout | Divider, Drawer Sidebar, Footer, Hero, Indicator, Join, Mask, Stack |
Mockup | Browser, Code, Phone, Window |
一般的な B2B ダッシュボードや B2C 向けの UI で必要とされるコンポーネントはひととおり網羅されており、追加で自作するコンポーネントを最小化しやすい構成です。特に Mockup カテゴリ（ブラウザ・スマホ・ウィンドウのモック UI）はランディングページ制作で有用な差別化要素になります。
35 種の内蔵テーマと data-theme 属性
daisyUI は 35 種類のテーマを標準搭載しています。light / dark に加え、cupcake / bumblebee / synthwave / cyberpunk / dracula / nord / sunset / silk など幅広いバリエーションが用意されており、ユーザーの好みや業種の雰囲気に合わせてテーマを切り替えられます。
利用したいテーマは CSS 側で明示的に有効化する必要があります。公式ドキュメントには以下のような記述例が示されています。
@import "tailwindcss";
@plugin "daisyui" {
themes: light --default, dark --prefersdark, cupcake;
}
（出典: daisyUI Themes）
--default を付けたテーマがデフォルト表示、--prefersdark を付けたテーマが OS のダーク設定に追従します。テーマの切り替えは HTML 要素に data-theme="THEME_NAME" 属性を付与するだけで完了し、動的な切り替え機能を組み込む場合は公式が別リポジトリ theme-change を提示しています。
CSS 変数によるカスタムテーマ設計
daisyUI 5 では、テーマの色定義が CSS 変数として公開されています。v4 まで使われていた --p（primary）のような略記から、--color-primary 形式へ変更され、コード上での可読性が向上しました。
カスタムテーマは @plugin "daisyui/theme" ディレクティブで定義できます（出典: daisyUI Themes）。CSS 変数ベースであるため、既存のブランドカラーやデザインシステムのトークンを注入する形で自社テーマを構築しやすい設計です。
導入方法（Tailwind CSS v4 前提）
daisyUI 5 は Tailwind CSS 4 を前提としています。既存プロジェクトの Tailwind バージョンが v3 の場合、Tailwind 側のアップグレードが先に必要になる点は導入前に押さえておくべきポイントです。
npm 経由の導入と CSS 設定
公式のインストールガイドでは、npm で導入したうえで CSS ファイル側でプラグインを有効化する手順が示されています。
npm i -D daisyui@latest
CSS 側の最小構成は以下のとおりです。
@import "tailwindcss";
@plugin "daisyui";
（出典: daisyUI Install）
tailwind.config.js の plugins に daisyUI を登録していた v4 までの記述は廃止され、CSS 内の @plugin ディレクティブで完結する形に変わっています。この変更により、Tailwind CSS 4 の CSS ファーストな設定方針と整合し、JavaScript 側の設定ファイルを削減できます。
CDN 経由の利用
ビルドツールを持たない静的 HTML プロジェクトや、素早くプロトタイプを組みたい場面では CDN 経由の利用も可能です。公式は以下の URL を提示しています。
https://cdn.jsdelivr.net/npm/daisyui@5
（出典: daisyUI CDN）
CDN 経由では NPM 経由よりも設定可能な項目が限定されますが、既存の HTML に <link> タグを追加するだけで daisyUI のコンポーネントクラスが利用可能になります。
対応フレームワーク
daisyUI は Tailwind CSS の CSS 出力に依存するため、フレームワークを選びません。公式ドキュメントでは React・Vue・Svelte・Angular・Next.js・Nuxt・SvelteKit・Astro・Vite・Rails・Laravel・Phoenix・Django・WordPress など、40 以上のフレームワーク／環境ごとのセットアップ手順が用意されています。
このカバレッジの広さは、複数フレームワークを横断するプロジェクトや、既存プロジェクトの技術スタックを問わず統一した UI を提供したい場合に、後述の類似 OSS と比べた強みになります。
類似 OSS との違い（shadcn/ui・Flowbite・Preline UI）
daisyUI の位置づけを理解するには、同じ「Tailwind CSS コンポーネントライブラリ」という文脈で比較される代表的な 3 つの OSS との差分を整理するのが最も分かりやすい方法です。
shadcn/ui との違い
shadcn/ui は、React／Next.js を前提としたコンポーネント集で、CLI を通じて各コンポーネントのソースコードをプロジェクト内にコピーする「所有型」のアプローチを取ります。アクセシビリティプリミティブとして Radix UI に依存しており、JavaScript ランタイムを持ちます。
daisyUI との主な違いは以下のとおりです。
- 対応フレームワーク: shadcn/ui は基本 React 特化、daisyUI はフレームワーク非依存
- JS 依存: shadcn/ui は Radix UI 依存、daisyUI は JS ゼロ
- 配布形態: shadcn/ui は CLI でソースコピー、daisyUI は npm パッケージ
- テーマ数: shadcn/ui は基本 2 種、daisyUI は 35 種
- カスタマイズ性: shadcn/ui は各コンポーネントを自プロジェクトで所有・改修可能、daisyUI は CSS 変数によるテーマ設計
「コンポーネントごとのソースを自プロジェクトで所有し、細部まで改修したい」ケースでは shadcn/ui が、「JS を追加せず、複数フレームワークで統一 UI を再利用したい」ケースでは daisyUI が向きます。詳細な比較は daisyUI vs shadcn/ui の公式比較ページでも整理されています。
Flowbite との違い
Flowbite は Tailwind CSS ベースの UI ライブラリで、React／Vue／Svelte 用の公式パッケージを提供しています。コンポーネントに JavaScript の挙動（モーダル・ドロップダウン・タブ切替等）が同梱されている点が daisyUI との大きな差分です。
- JS 挙動: Flowbite はコンポーネントに JS 挙動を同梱、daisyUI は JS ゼロで挙動は利用側で実装
- 依存パッケージ: Flowbite は React／Vue／Svelte 用に依存パッケージが 22 前後、daisyUI は依存ゼロ
- フレームワーク対応: Flowbite は主要 3 フレームワーク中心、daisyUI は 40 以上の環境
「JS 挙動込みでコンポーネントを完成品として使いたい」場合は Flowbite が、「JS 挙動は自前の状態管理・ルーティングと統合したい」場合は daisyUI が向きます。詳細な比較は daisyUI vs Flowbite の公式比較ページで確認できます。
Preline UI との違い
Preline UI は Tailwind CSS と JavaScript プラグインで構成される UI キットです。特徴として、「ヒーローセクション」「価格表」「特徴グリッド」といったページセクション単位の提供が多く、ランディングページ制作を素早く進める用途に強みがあります。
daisyUI との差分は「提供粒度」にあります。daisyUI は個別のコンポーネント（ボタン・カード・モーダル等）を組み合わせて UI を構築する志向であるのに対し、Preline UI はページセクションレベルのテンプレートを組み合わせる志向です。対象とする設計フェーズが異なるため、直接の代替関係というよりは「用途による棲み分け」として捉えるのが実態に近い比較になります。
4 OSS の対照表
上記の比較を一覧化すると、選定時の判断軸が可視化しやすくなります。
項目 | daisyUI 5 | shadcn/ui | Flowbite | Preline UI |
|---|---|---|---|---|
配布形態 | npm プラグイン | CLI ソースコピー | npm パッケージ | npm パッケージ |
対応フレームワーク | フレームワーク非依存（40+ 環境） | React / Next.js 特化 | React / Vue / Svelte 中心 | Tailwind + JS プラグイン |
JS 依存 | ゼロ | Radix UI 依存 | 独自 JS 同梱 | 独自 JS 同梱 |
テーマ数 | 35 種内蔵 | 基本 2 種 | 限定的 | 限定的 |
提供粒度 | 個別コンポーネント（68 個） | 個別コンポーネント | 個別コンポーネント | ページセクション中心 |
所有型 | プラグインとして利用 | ソースを所有・改修 | ライブラリとして利用 | ライブラリとして利用 |
「JS ゼロ・複数フレームワーク・テーマ数の多さ」を重視するなら daisyUI が有利であり、「所有型でのカスタマイズ性」を重視するなら shadcn/ui、「完成品としての挙動込みコンポーネント」を重視するなら Flowbite、「ページセクション単位での素早い構築」を重視するなら Preline UI が向くという棲み分けが読み取れます。
daisyUI が向いているケース／向いていないケース
技術選定の判断は「万能なプロダクト」を探すのではなく、「自プロジェクトの前提条件に合うか」を確認する作業です。daisyUI についても、向いているケースと向いていないケースを整理します。
向いているケース
daisyUI が特に効果を発揮するのは以下のようなケースです。
- 素の Tailwind の冗長さを抑えたい: 頻出パターン（ボタン・カード・モーダル等）のクラス連結を
btncardmodalのセマンティッククラスに置き換えることで、HTML の可読性と保守性が向上します - 複数フレームワークで同じ見た目を再利用したい: フレームワーク非依存であるため、React で作った UI と同じ見た目を Svelte や Rails のプロジェクトでも再利用しやすい構造です
- 内蔵テーマで見た目を高速に切り替えたい: 35 種の内蔵テーマと
data-theme属性の組み合わせで、テーマ切替機能を短時間で実装できます - JS ゼロで済ませたい: セキュリティ要件や配信サイズの制約で追加の JavaScript を避けたいプロジェクト、または JS 挙動を自前の状態管理と統合したいプロジェクトに適合します
向いていないケース
一方、以下のケースでは他の OSS の方が適合する可能性があります。
- Radix UI 等のアクセシビリティプリミティブに深く依存したい: WAI-ARIA 準拠のキーボード操作・フォーカス管理・スクリーンリーダー対応を、コンポーネント側の JS で担保したい場合は shadcn/ui + Radix UI の組み合わせが向きます
- 各コンポーネントのソースを所有・改修したい: コンポーネントの内部実装を自プロジェクトで完全にコントロールしたい場合、プラグイン型の daisyUI よりも所有型の shadcn/ui が適合します
- 完全にヘッドレスなコンポーネント（挙動を自前で組む）で構築したい: Radix UI Primitives や Headless UI のように、装飾を持たない挙動のみのコンポーネントを組み合わせる設計方針では、装飾込みの daisyUI とは目的が合いません
これらの判断は排他的ではなく、実際のプロジェクトでは「ダッシュボード部分は daisyUI、複雑なフォームの挙動は shadcn/ui + Radix UI」といった併用も選択肢になります。
メンテナンス状況と v4→v5 の破壊的変更
OSS の技術選定では、機能面だけでなく「今後もメンテナンスされ続けるか」の健全性判断が欠かせません。daisyUI のメンテナンス状況と、既存プロジェクトが影響を受ける可能性のある v5 の破壊的変更を整理します。
メンテナンス状況（41,578 スター／1,649 フォーク／2026-07-08 最終更新）
gh api /repos/saadeghi/daisyui で取得した本記事執筆時点のメトリクスは以下のとおりです。
項目 | 値 |
|---|---|
スター数 | 41,578 |
フォーク数 | 1,649 |
最終 push | 2026-07-08 |
ライセンス | MIT |
archived | false |
fork | false |
disabled | false |
スター数 41,578 は Tailwind CSS 系 UI ライブラリの中で最上位クラスに位置し、フォーク数 1,649 と併せて広範なユーザーベースの存在を示しています。最終 push が本記事執筆時点から数日以内であること、archived / fork / disabled のいずれも false であることから、アクティブな本家リポジトリとしてメンテナンスされている状態と判断できます。
v5 の主な破壊的変更（設定ファイル移行・クラス名変更）
v4 から v5 への移行では、いくつかの破壊的変更が発生しています。既存の v4 プロジェクトを v5 に移行する場合、以下の変更点を確認する必要があります（出典: daisyUI v5 Release Notes, Upgrade Guide）。
- 設定ファイルの移行:
tailwind.config.jsのplugins記述を廃止し、CSS ファイル内で@plugin "daisyui";を書く形式へ変更 btn-group/input-group→join: グルーピング用クラスがjoinに統合form-control→fieldset: フォームコントロール要素の名称が変更card-compact→card-sm: カードのサイズ指定がサイズ接尾辞方式に統一btm-nav→dock: ボトムナビゲーションがdockコンポーネントとして再設計- menu / avatar のモディファイアクラスがプレフィックス付きに変更
- 自動
*-contentカラー計算の廃止、styled/base/utils設定の廃止 - CSS 変数の可読化:
--pのような略記から--color-primary形式へ変更
これらの変更は主にクラス名の一括置換と CSS 設定ファイルの書き換えで対応可能な範囲ですが、プロジェクトが v4 のクラス名を大量に含む場合、移行コストの見積もりが不可欠です。特に btn-group → join や form-control → fieldset は概念自体が再設計されているため、単純な置換だけでは意図した挙動にならない箇所が発生する可能性があります。
v5 のパフォーマンス改善（NPM 61% 縮小・CDN 75% 縮小・依存ゼロ）
v5 では破壊的変更と引き換えに、以下のパフォーマンス改善が実現されています（出典: daisyUI v5 Release Notes）。
- NPM パッケージサイズ: 4.7MB → 1.8MB（61% 縮小）
- CDN 圧縮ファイル: 137KB → 34KB（75% 縮小）
- 依存ライブラリ: ゼロ
依存ライブラリがゼロであることは、supply chain の観点でもリスクが低く、CI/CD やセキュリティ監査で扱いやすい特徴です。パッケージサイズの縮小は、モノレポや複数依存を抱える大規模プロジェクトでのビルド時間・配信サイズにも波及効果があります。
まとめ - Tailwind CSS コンポーネントライブラリとしての採用判断チェックリスト
Tailwind CSS コンポーネントライブラリとしての daisyUI の採用可否を判断する際は、以下のチェックリストで自プロジェクトの前提条件と照合するのが効率的です。
- ライセンス要件: daisyUI は MIT ライセンス。商用利用・改変・再配布の制約は緩く、多くのプロジェクトで導入可能
- Tailwind CSS のバージョン: daisyUI 5 は Tailwind CSS 4 を前提とする。既存プロジェクトが v3 の場合は Tailwind 側のアップグレードが先に必要
- フレームワーク: フレームワーク非依存。React / Vue / Svelte / Astro / Rails など 40 以上の環境で利用可能
- JS 依存の許容度: JS ゼロが必須または望ましい場合は daisyUI が最有力候補、Radix UI 等のプリミティブに依存したい場合は shadcn/ui が向く
- コンポーネント数の要件: 68 コンポーネント × 7 カテゴリで一般的な B2B / B2C UI をカバー。ページセクション単位のテンプレートが多く必要な場合は Preline UI との併用も選択肢
- テーマ切替の要件: 35 種の内蔵テーマ + CSS 変数によるカスタムテーマ。テーマ切替を短時間で組み込みたい場合は強みが大きい
- v4→v5 移行コスト: 既存 v4 プロジェクトを v5 に移行する場合、
btn-group→join、form-control→fieldset等の破壊的変更を洗い出し、移行時間を見積もる - メンテナンス健全性: スター数 41,578 / フォーク数 1,649 / 最終 push 2026-07-08 と、アクティブメンテナンス状態にある。archived / fork / disabled いずれも false
このチェックリストで前提条件と要件が概ね合致する場合、daisyUI は Tailwind CSS ベースのコンポーネント選定における有力候補として PoC 検証に進む価値があります。合致しない項目がある場合は、上述の類似 OSS との差分表を参照し、要件に合う OSS を追加候補として並行検討することを推奨します。
daisyUI の詳細情報は 公式サイト と GitHub リポジトリ、v5 の変更点は Release Notes と Upgrade Guide が一次情報源です。採用判断の最終確認は、これらの一次情報に立ち返って行うことをおすすめします。
