Zenn
🐕

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

2024/01/16に公開1件
Tailwind CSS
Tailwind CSS
tech

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://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/

Discussion