Tailwind CSS上に構築した再利用可能なUIコンポーネントライブラリで、ウェブサイト開発を高速化します。
中辛 の解説
Tailwind CSS v4対応のコンポーネントライブラリです。NPMでインストールするか、CDNで読み込むかを選べます。TypeScriptとJavaScriptの両方に対応し、React・Vue・Svelte・Angular・Qwikなど主要フレームワークに対応したラッパーライブラリも別途提供されています。HTMLの data-属性を使ったシンプルな方法と、JavaScriptAPIによるプログラマティックな使用法の両方が可能です。デモは公式サイト flowbite.com で確認できます。
こんなリポジトリです
こんなときに便利です
- Tailwind CSS プロジェクトでモーダル・ドロップダウン・ナビゲーションバーなど、すぐに使える UI を組み込みたい場合
- React・Vue・Svelte など複数のフレームワークで同じコンポーネント構文を再利用したい場合
- ダークモード対応とテーマ切り替えを最小限のコーディングで実装したい場合
主な機能
ほかとの違い
Vanilla JavaScript ベースで設計されているため、バックエンド フレームワーク（Laravel・Django・Rails など）でも追加の変換ステップなしに利用でき、Bootstrap や Material UI より Tailwind CSS との統合が一体です。
このリポジトリの作り方
はじめてですか？ むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。
準備するもの
- Node.js
- Tailwind CSS v4
すぐに始める
- Node.js と Tailwind CSS をインストールしておきます。
npm install tailwindcss
- npm 経由で Flowbite をインストールします。
npm install flowbite
- メインの入力CSS（input.css）ファイルに、デフォルトテーマの変数をインポートします。
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";
- CSS に Flowbite プラグインとソース設定を追加します。
@plugin "flowbite/plugin";
@source "../node_modules/flowbite";
- HTML ファイルの
</body>タグの直前に、JavaScript ファイルを読み込みます。
<script src="../path/to/flowbite/dist/flowbite.min.js"></script>
- Vue や Nuxt など フレームワークの場合は、マウント時に
initFlowbite()を呼び出します。
import { initFlowbite } from 'flowbite'
import { onMounted } from 'vue'
onMounted(() => {
initFlowbite()
})
ギット飯トライで味見
入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。
ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。
npx gitbap-try themesberg/flowbite
Node.js さえあれば、インストールなしで動きます · ギット飯トライとは？ →
スター推移 · 7日
確認日時
使いやすさ · まねしやすいか
- ゆるいライセンス
- テストあり
- サンプル集
- 最近の更新
- AGENTS.md
- llms.txt
- テンプレート
最近の更新あり · 2021 年に作成
「デザイン・UI コンポーネント」 こういうリポジトリを毎週受け取りませんか？
毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。
自分のリポジトリですか？ README にギット飯バッジを貼る
[](https://www.gitbap.com/r/themesberg/flowbite)Claude からそのまま使う — ギット飯のつなぎ方
ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。
Claude の設定 → コネクタにこのアドレスを貼り付け。
https://www.gitbap.com/api/mcpプラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI が README をもとに要約しました · 原文を見る