Tailwind CSS で作られた UI Library あれこれ

Tailwind CSS で実装された UI Library がとても増えていてありがたいのだけど Tailwind Plugin で作られているものは意外と少ない。 React や Vue のコンポーネントとして提供されているものが多く、単に HTML や JSX や React のコードを公開しているタイプのものも。検索して一通り確認してみた。

UI Library	URL	GitHub	Tailwind Plugin	Figma UI Kit	Dark Mode	Commercial Plan	Support Frameworks in Official Docs	感想
shadcn/ui	https://ui.shadcn.com/	https://github.com/shadcn-ui/ui	No	Yes	Yes	No	React	豊富
daisyUI	https://daisyui.com/	https://github.com/saadeghi/daisyui	Yes	No	Yes	No	React, Vue(WIP), Raravel	機能性高い。すごい
headless UI	https://headlessui.com/	https://github.com/tailwindlabs/headlessui	No	-	-	No	React, Vue	ヘッドレス。Tailwind Labs 本家
Tailwind Elements	https://tw-elements.com/	https://github.com/mdbootstrap/TW-Elements/	No	No	Yes	No	Angular, Vue, Express, Django, Laravel, Next, Nuxt, React, Remix, Solid, Svelte,	豊富
Hyper UI	https://www.hyperui.dev/	https://github.com/markmead/hyperui	No	No	Yes	No
Flowbite	https://flowbite.com/	https://github.com/themesberg/flowbite	No	Yes	Yes	Yes	React, Vue, Svelte, Angular, Next, Nuxt, Astro, Remix, Meteor, Gatsby, SolidJS, Qwik, Laravel, Symfony, Rails, Phoenix, Django, Flask, Blazor	豊富
Tailwind Starter Kit	https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation	https://github.com/creativetimofficial/tailwind-starter-kit	No	Yes	No	Yes	React, Vue, Angular
Skelton	https://www.skeleton.dev/	https://github.com/skeletonlabs/skeleton	Partly	Yes	Yes	No	Svelte, Tauri	Svelte と Tailwind Plugin のみ。量は多くないがかわいい
Preline UI	https://preline.co/	https://github.com/htmlstreamofficial/preline	Partly	Yes	Yes	Coming soon	React, Vue	豊富
Konsta UI	https://konstaui.com/	https://github.com/konstaui/konsta	No	Yes	Yes	No	React, Vue, Svelte	モバイル
Material Tailwind	https://www.material-tailwind.com/	https://github.com/creativetimofficial/material-tailwind	No	Yes	No	No	React, Next, Remix, Astro, Gatsby	多い
Tail-kit	https://www.tailwind-kit.com/	https://github.com/Charlie85270/tail-kit	No	No	Yes	No	Rreact, Vue, Aunglar	テンプレート と ダッシュボード
Meraki UI	https://merakiui.com/	https://github.com/merakiui/merakiui	No	No	Yes	No
Supabase UI	https://ui.supabase.io/	https://github.com/supabase/ui	No	No	Coming soon	No	React	Supabase
Sailboat UI	https://sailboatui.com/	https://github.com/sailboatui/sailboatui	No	No	No	No
TailGrids	https://tailgrids.com/	https://github.com/TailGrids/tailwind-ui-components	No	Yes	Yes	Yes	React, Vue	基本的に有料。Freeのものは一部
Kutty	https://kutty.netlify.app/	https://github.com/praveenjuge/kutty/	Yes	No	No	No		Tailwind & Alpine.js
Ripple UI	https://www.ripple-ui.com/	https://github.com/Siumauricio/rippleui	Yes	No	Yes	No	React, Next, Remix, Svelte
Mamba UI	https://mambaui.com/	https://github.com/Microwawe/mamba-ui	No	No	Yes	No	Vue, JSX	豊富
Xtend UI	https://xtendui.com/	https://github.com/xtendui/xtendui	Yes	No	No	No
Kimia-UI	https://kimia-ui.vercel.app/	https://github.com/enochndika/kimia-UI	No	No	No	No	React, Next, Remix, Gatsby	https://www.salvia-kit.com/ ダッシュボード
Sira	https://sira.riazer.com/	https://github.com/riazer-lab/sira	No	No	Yes	No
Winduum	https://winduum.dev/	https://github.com/winduum/winduum	Yes	No	Yes	No		シンプル
tailwind UI	https://tailwindui.com/		No	No	No	Yes	React, Vue	Tailwind Labs 本家
windstatic	https://windstatic.com/		No	No	No	Yes		Tailwind & Alpine.js
myna ui	https://mynaui.com/		No	Coming soon	No	No

途中まで一通り触ってみてたんですが、途中で触らずにドキュメントだけ見て書いてます。間違ってたらコメントとかで教えてください。

補足

• 並び順は確認した日の GitHub Star 数の降順。 GitHub リポジトリがないものは一番下にきてしまっている。
• Support Frameworks in Official Docs はあくまで公式ドキュメントに解説や言及があるものをピックアップしているだけ。
• また Support Frameworks in Official Docs はコンポーネントとして提供していることを表してはいない。例えば Manba UI Vue のコード例は提供しているけど Vue コンポート化されて配布されているわけではない。
• Tailwind Plugin 形態ならある程度フレームワーク・フリーな気がしますが、DaisyUIのようにさらに React や Vue のコンポーネントを提供しているものもあるよう。
• 個人的には有料 Pro プランを出してるところはメンテが活発に続きそうかなー、とも思って確認してみた。
• せっかくだからライセンスも調べとけば良かった。。

参考

• https://blog.logrocket.com/10-best-tailwind-css-component-libraries/
• https://zenn.dev/kkeisuke/scraps/c3d668e6388676
• https://sailboatui.com/tools/

カード

https://ui.shadcn.com/
https://daisyui.com/
https://headlessui.com/
https://tw-elements.com/
https://www.hyperui.dev/
https://flowbite.com/
https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation
https://www.skeleton.dev/
https://preline.co/
https://konstaui.com/
https://www.material-tailwind.com/
https://www.tailwind-kit.com/
https://merakiui.com/
https://ui.supabase.io/
https://sailboatui.com/
https://tailgrids.com/
https://kutty.netlify.app/
https://www.ripple-ui.com/
https://mambaui.com/
https://xtendui.com/
https://kimia-ui.vercel.app/
https://sira.riazer.com/
https://winduum.dev/
https://tailwindui.com/
https://windstatic.com/
https://mynaui.com/