Flowbite - Tailwind CSSにコンポーネントの骨格を与えるライブラリ

はじめに

Tailwind CSSでUIを組んでいると、ボタンやフォームのような静的なパーツはすぐに作れても、モーダルやドロップダウン、タブといった「開閉状態を持つ」コンポーネントで手が止まった経験はないでしょうか。クラス名で見た目は整えられても、表示・非表示の切り替えやアウトサイドクリックでの自動クローズ、キーボード操作への対応まで自前で実装するとなると、思いのほか工数がかさみます。

「Flowbite」は、そうした悩みをTailwind CSSの流儀を崩さずに解決してくれるオープンソースのUIコンポーネントライブラリです。GitHub上で9,000以上のスターを獲得しており、Tailwind CSSベースのコンポーネント集としては最も採用例が多いプロジェクトの一つです。この記事では、Flowbiteの特徴からインストール方法、実際の使い方までを解説します。

Flowbiteとは

Flowbiteは、Tailwind CSSのユーティリティクラスをベースに作られた、対話型UIコンポーネントのオープンソースライブラリです。ボタンやアラートといった静的なパーツから、モーダル・ドロップダウン・タブ・データピッカーといった動きのあるコンポーネントまで、56種類以上を提供しています。Tailwind CSS自体は「レイアウトを組むための素材」であってコンポーネント集ではないため、Flowbiteはそのギャップを埋め、Bootstrapのような従来のCSSフレームワークで得られていた「すぐ使えるパーツ」をTailwindの世界に持ち込む役割を果たします。

主な特徴

• 56種類以上のコンポーネント - ボタン、アラート、ナビゲーション、モーダル、データピッカー、テーブルなど、一般的なWebサイトに必要なパーツを一通りカバーしています
• データ属性ベースのJavaScript API - data-modal-targetやdata-dropdown-toggleのようなHTML属性を付けるだけで、複雑なイベントリスナーを自前で書かずに開閉動作を実装できます
• プログラマティックAPIも用意 - ModalやDropdownといったクラスを直接importして、JavaScriptから細かく制御することも可能です
• フレームワーク公式対応 - React（flowbite-react）、Vue（flowbite-vue）、Svelte（flowbite-svelte）向けの公式ラッパーが提供されています
• ダークモード・Figma対応 - ダークモード用のクラスがあらかじめ用意されているほか、Figmaのデザインシステムも無料で公開されています

インストール

npmでFlowbiteパッケージをインストールします。

npm install flowbite

Tailwind CSS(v4系)のエントリーCSSファイルに、Flowbiteのプラグインとソースファイルの参照を追加します。

@import "tailwindcss";
@plugin "flowbite/plugin";
@source "../node_modules/flowbite";

インタラクティブなコンポーネントを動かすため、JavaScript側でFlowbiteを読み込みます。

import "flowbite";

これだけで、data-modal-targetやdata-dropdown-toggleなどのデータ属性を使ったコンポーネントが自動的に初期化されます。手早く試したいだけであれば、CDN経由でCSSとJSを読み込む方法もあります。

<link href="https://cdn.jsdelivr.net/npm/flowbite@4.0.2/dist/flowbite.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/flowbite@4.0.2/dist/flowbite.min.js"></script>

基本的な使い方

Flowbiteの基本は、コンポーネントのマークアップに決められたデータ属性を付けるだけです。以下はモーダルウィンドウの例です。data-modal-targetで対象のモーダルを指定し、data-modal-toggleを付けたボタンをクリックすると開閉します。

このサンプルでは、Flowbite本来の見た目であるTailwind CSSのユーティリティクラスの代わりに、動作確認用の最小限のCSSを当てています。実際のプロジェクトでは、上記CSSのクラス名部分がそのままTailwindのクラスに置き換わり、デザインの調整も自由に行えます。開閉のロジック自体は、import "flowbite"だけで有効になっている点に注目してください。

実践的なユースケース

プログラマティックAPIでの制御

フォーム送信後に確認モーダルを自動的に開きたい場合など、ユーザーのクリック以外のタイミングでコンポーネントを制御したいケースがあります。そうした場合は、データ属性ではなくModalクラスを直接importして、JavaScriptから開閉を呼び出せます。

new Modal(要素, オプション)でインスタンスを作成すると、show() / hide() / toggle()をコードから自由に呼び出せます。onShowやonHideといったコールバックも用意されているので、モーダルの開閉に合わせて他の処理を連動させることも簡単です。

Reactでの利用

Reactプロジェクトでは、Flowbite本体のデータ属性APIをそのまま使うより、公式ラッパーのflowbite-reactを使う方が扱いやすくなります。コンポーネントとしてPropsで制御できるため、Reactの状態管理と自然に組み合わせられます。

npm install flowbite-react

import { Button, Modal } from "flowbite-react";
import { useState } from "react";

export function ConfirmDialog() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>削除する</Button>
      <Modal show={open} onClose={() => setOpen(false)}>
        <Modal.Header>本当に削除しますか？</Modal.Header>
        <Modal.Body>この操作は取り消せません。</Modal.Body>
        <Modal.Footer>
          <Button color="failure" onClick={() => setOpen(false)}>
            削除する
          </Button>
          <Button color="gray" onClick={() => setOpen(false)}>
            キャンセル
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

showにstateを渡すだけで開閉を制御できるため、data-modal-targetのようなDOM操作を意識する必要がありません。Next.jsのApp Routerなどクライアントサイドルーティングを使う環境でも、Reactのライフサイクルに沿って自然に動作します。

まとめ

Flowbiteは、Tailwind CSSの自由度を保ったまま、実装コストの高いインタラクティブなコンポーネントを一通り揃えられるライブラリです。データ属性を付けるだけの手軽な使い方から、Modalクラスによる細かい制御、Reactなどのフレームワーク向け公式ラッパーまで、プロジェクトの規模や要件に合わせて選択肢を用意しているのが強みといえます。

Tailwind CSSでUIコンポーネントの実装に手間取っているなら、まずは公式サイトのコンポーネント一覧から気になるパーツを選び、既存のプロジェクトに組み込んでみてはいかがでしょうか。

参考リンク

• Flowbite公式ドキュメント
• Flowbite GitHub
• flowbite - npm