Tailwind CSS の UIコンポーネント・キットの参考サイト集

Tailwind CSS を使う際に便利な UI コンポーネント・キット等の参考サイトをまとめました。

目次

UI 系

Tailwind UI

公式サイト:https://tailwindui.com/

Tailwind CSS 公式が作成している UI コンポーネント。
ランディングページのヒーロー、機能セクション、ニュースレターの登録フォームなど、美しいデザインで作られた 400 種類以上のコンポーネントが用意されています。
一部無料で使用できますが、本格的に使いたいとなると有料プランに入る必要があります。
有料プランが気になる方は、Tailwind CSS Pricing をご覧ください。

daisyUI

公式サイト:https://daisyui.com/

npm でパッケージが公開されている Tawilwind CSS で作られた UI コンポーネント。
Bootstrap の class="btn btn-primary" のような形で daisyUI が定義しているのが特徴です。
Tailwind CSS はベタがきで HTML を書いていくサイトには合わない印象ですが、これなら活用できるかもしれません。
10 種類のテーマが用意されていて、それぞれデザインも素敵で可愛らしい印象です。

headless UI

公式サイト:https://headlessui.dev/

npm でパッケージが公開されている Tawilwind CSS で作られた UI コンポーネント。
React や Vue を使う前提でコンポーネントが用意されており、 Web アプリケーションを構築していく際に使うと便利だと思います。

Lofi UI

公式サイト:https://lofiui.co/

約 40 種類の UI コンポーネントが閲覧でき、ソースコードは CodePen で公開されています。

Kometa UI Kit

公式サイト:https://kitwind.io/products/kometa

約 130 種類以上の HTML、Vue、React で使用できる UI コンポーネントが用意されています。

Vechai UI

公式サイト:https://www.vechaiui.com/

npm でパッケージが公開されている Tawilwind CSS で作られた UI コンポーネント。
Preact cli, Next.js, Gatsby, およびその他の環境で使用できる UI コンポーネントが用意されています。

Supabase UI

公式サイト:https://ui.supabase.io/

npm でパッケージが公開されている Tawilwind CSS と AntDesign に触発された UI コンポーネント。

注意

Supabase UI は現在ベータ版で、本番環境に対応していません

Windmill UI

公式サイト:https://windmillui.com/

npm でパッケージが公開されている Tawilwind CSS で作られた UI コンポーネント。
主に、React を使用する前提で UI コンポーネントが作られています。

Meraki UI

公式サイト:https://merakiui.com/

約 60 種類のデザインが美しい Tailwind CSS で作られた UI コンポーネント。
ダークモードにも対応しています。

TAILBLOCKS

公式サイト:https://tailblocks.cc/

Web サイトを構築する際に、便利な Tailwind CSS で作られた UI コンポーネント。

Tail-kit

公式サイト:https://www.tailwind-kit.com/

約 250 種類の React、Vue、Angular で使用できるコンポーネント が用意されています。

Tailwind Toolbox

公式サイト:https://www.tailwindtoolbox.com/

UI テンプレートや、使うと便利なジェネレータ、ツールなどが掲載されているサイト。

Tailwind Templates

数は少ないですが、Tailwind CSS で作られたテンプレートが用意されています。

tailwindcompontnes

公式サイト:https://tailwindcomponents.com/

Tailwind CSS で作られたテンプレートサイトや UI コンポーネントが用意されています。
これまでとは少し変わった、ユーザー投稿型の参考サイトです。

Treact

公式サイト:https://treact.owaiskhan.me/

Tailwind CSS を使用して構築された、React 用のテンプレートサイトです。
約 50 種類の UI コンポートと、7 つのランディングページが用意されています。

TailwindCSS Buttons

公式サイト:https://devdojo.com/tailwindcss/buttons

【コピペで使える!CSS のボタンデザイン】系の Tailwind CSS バージョンです。


SVG 系

heroicons

公式サイト:https://heroicons.com/

Tailwind CSS が作成(?)しているSVG アイコン。

hero-patterns

公式サイト:https://www.heropatterns.com/

SVG 背景パターン。
とてもおしゃれな背景パターンが用意されています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です