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のモーダルサンプルを動かす

Flowbiteの基本は、コンポーネントのマークアップに決められたデータ属性を付けるだけです。以下はモーダル（Modalコンポーネント）の例です。data-modal-targetで対象のモーダルを指定し、data-modal-toggleを付けたボタンをクリックすると開閉します。開閉ロジックはFlowbite本体をimportするだけで有効になり、独自のイベントリスナーを書く必要はありません。中心となる書き方は次の通りです。

<button
  data-modal-target="demo-modal"
  data-modal-toggle="demo-modal"
  type="button"
>
  モーダルを開く
</button>

<div id="demo-modal" tabindex="-1" aria-hidden="true" class="hidden">
  <div>
    <!-- data-modal-hide を付けると、このボタンでモーダルを閉じられる -->
    <button data-modal-hide="demo-modal" type="button">&times;</button>
    <p>モーダルの本文</p>
  </div>
</div>

import "flowbite@4.0.2";
// これだけで data-modal-target / data-modal-toggle / data-modal-hide が有効になる

実際に動かして確かめられるのが以下のサンプルです。「モーダルを開く」ボタンを押して開閉を試したあと、data-modal-targetの値やaria-hiddenの初期値を書き換えて挙動がどう変わるか確認してみてください。

このサンプルでは、Flowbite本来の見た目であるTailwind CSSのユーティリティクラスの代わりに、動作確認用の最小限のCSSを当てています。実際のプロジェクトでは、上記CSSのクラス名部分がそのままTailwindのクラスに置き換わり、デザインの調整も自由に行えます。開閉のロジック自体は、import "flowbite"だけで有効になっている点に注目してください。data-modal-targetの値を別のid（存在しないid）に書き換えると、対象のモーダルが見つからずボタンを押しても何も起こらなくなる点も試してみると、この属性がFlowbiteの動作の要になっていることが分かります。

実践的なユースケース

FlowbiteのModalクラスでプログラム制御するサンプル

フォーム送信後に確認モーダルを自動的に開きたい場合など、ユーザーのクリック以外のタイミングでコンポーネントを制御したいケースがあります。そうした場合は、データ属性ではなくModalクラスを直接importして、JavaScriptから開閉を呼び出せます。new Modal(要素, オプション)でインスタンス化し、show() / hide() / toggle()のメソッドで制御するのが基本の書き方です。

import { Modal } from "flowbite@4.0.2";

const targetEl = document.getElementById("my-modal");
const modal = new Modal(targetEl, {
  onShow: () => console.log("モーダルが開きました"),
  onHide: () => console.log("モーダルが閉じました"),
});

modal.show();
modal.hide();
modal.toggle();

実際に動かせるのが以下のサンプルです。ボタンを押すと1秒後にModalクラスのshow()が呼ばれてモーダルが開き、「閉じる」ボタンでhide()が呼ばれます。

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