Reference

コンポーネントカタログ

Tailwind CDN v4 + Flowbite CDN の組み合わせを前提とした、実際にブラウザで動くライブデモ付きのコンポーネント集。インタラクティブ系コンポーネントはdata-*属性だけで動く（JS呼び出し不要）。全コンポーネント共通で以下をheadに入れる。

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr.net/npm/flowbite@2/dist/flowbite.min.js" defer></script>

このカタログはよく使う約20種のクイックリファレンスであり、Flowbiteの全コンポーネント・全ブロックを網羅したものではない。 ここにない実装が必要な場合は、flowbite.com/docs/components（全コンポーネント公式リファレンス）やflowbite.com/blocks（Hero・Pricing・Team・FAQ等の完成ページブロック集）を自由に参照してよい。同じCDN読み込み・data-*属性の仕組みでそのまま動く。

Interactive

Modal

Modaldata-*属性

<button data-modal-target="demo-modal" data-modal-toggle="demo-modal" type="button"
  class="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5">
  モーダルを開く
</button>
<div id="demo-modal" tabindex="-1" aria-hidden="true"
  class="hidden fixed inset-0 z-50 flex items-center justify-center w-full h-full bg-black/50">
  <div class="relative bg-white rounded-lg shadow max-w-md w-full mx-4">
    <div class="flex items-center justify-between p-4 border-b">
      <h3 class="text-lg font-semibold">タイトル</h3>
      <button type="button" data-modal-hide="demo-modal"
        class="text-gray-400 hover:text-gray-900 rounded-lg text-sm p-1.5">✕</button>
    </div>
    <div class="p-4"><p class="text-sm text-gray-600">本文。</p></div>
  </div>
</div>

Interactive

Drawer (Offcanvas)

Drawerdata-*属性

タイトル

<button data-drawer-target="demo-drawer" data-drawer-show="demo-drawer" data-drawer-placement="right"
  type="button" class="text-white bg-blue-700 rounded-lg text-sm px-5 py-2.5">Drawerを開く</button>
<div id="demo-drawer" class="fixed top-0 right-0 z-40 h-screen p-4 w-80 translate-x-full bg-white shadow-lg"
  tabindex="-1" aria-labelledby="demo-drawer-label">
  <h5 class="text-base font-semibold">タイトル</h5>
  <button type="button" data-drawer-hide="demo-drawer" class="absolute top-2.5 right-2.5">✕</button>
</div>

Interactive

Tabs

Tabsdata-*属性

タブAの内容

<div class="border-b border-gray-200">
  <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" role="tablist">
    <li role="presentation"><button class="inline-block p-4 border-b-2" id="tab-a-tab"
      data-tabs-target="#tab-a" type="button" role="tab">タブA</button></li>
    <li role="presentation"><button class="inline-block p-4 border-b-2" id="tab-b-tab"
      data-tabs-target="#tab-b" type="button" role="tab">タブB</button></li>
  </ul>
</div>
<div id="tab-a" role="tabpanel" aria-labelledby="tab-a-tab">タブAの内容</div>
<div id="tab-b" role="tabpanel" aria-labelledby="tab-b-tab" class="hidden">タブBの内容</div>

Interactive

Accordion

Accordiondata-*属性

<div id="demo-accordion" data-accordion="collapse">
  <h3 id="acc-h-1">
    <button type="button" class="flex items-center justify-between w-full p-4 border"
      data-accordion-target="#acc-b-1" aria-expanded="false" aria-controls="acc-b-1">
      <span>質問1</span>
      <svg data-accordion-icon class="w-3 h-3 shrink-0" fill="none" viewBox="0 0 10 6">
        <path stroke="currentColor" stroke-width="2" d="M9 5 5 1 1 5"/></svg>
    </button>
  </h3>
  <div id="acc-b-1" class="hidden" aria-labelledby="acc-h-1">
    <div class="p-4 border-b"><p>回答1のテキスト。</p></div>
  </div>
</div>

Interactive

Dropdown

Dropdowndata-*属性

<button id="dd-button" data-dropdown-toggle="dd-menu" type="button"
  class="text-white bg-blue-700 rounded-lg text-sm px-5 py-2.5">メニュー ▾</button>
<div id="dd-menu" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44">
  <ul class="py-2 text-sm text-gray-700" aria-labelledby="dd-button">
    <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">項目1</a></li>
    <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">項目2</a></li>
  </ul>
</div>

Interactive

Tooltip / Popover

Tooltip / Popoverdata-*属性

<button data-tooltip-target="tt-1" type="button">用語</button>
<div id="tt-1" role="tooltip" class="... tooltip">補足説明<div class="tooltip-arrow"></div></div>

<button data-popover-target="pop-1" type="button">詳細</button>
<div id="pop-1" role="tooltip" class="..."><div class="p-3">ポップオーバーの本文。</div></div>

Interactive

Carousel

Carouseldata-*属性

<div id="demo-carousel" class="relative w-full" data-carousel="slide">
  <div class="relative h-56 overflow-hidden rounded-lg">
    <div class="hidden duration-700 ease-in-out" data-carousel-item="active">...</div>
    <div class="hidden duration-700 ease-in-out" data-carousel-item>...</div>
  </div>
  <button type="button" data-carousel-prev>◀</button>
  <button type="button" data-carousel-next>▶</button>
</div>

Interactive

Toast (Dismiss)

Toastdata-*属性

保存しました。

<div id="demo-toast" class="flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow">
  <span class="text-sm font-normal">保存しました。</span>
  <button type="button" class="ms-auto -mx-1.5 -my-1.5 rounded-lg p-1.5" data-dismiss-target="#demo-toast" aria-label="Close">✕</button>
</div>

Interactive

Datepicker（別パッケージ）

Datepickerflowbite-datepicker

<script src="https://cdn.jsdelivr.net/npm/flowbite-datepicker@1/dist/js/datepicker.min.js"></script>
<input datepicker datepicker-format="yyyy-mm-dd" type="text"
  class="border rounded-lg px-3 py-2 text-sm" placeholder="日付を選択">

Static

Button / Button Group

Buttonクラスのみ

<button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4
  focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5">Primary</button>
<button class="text-gray-900 bg-white border border-gray-300 hover:bg-gray-100
  font-medium rounded-lg text-sm px-5 py-2.5">Secondary</button>

Static

Card

Cardクラスのみ

タイトル

本文テキスト。

続きを読む →

<div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm">
  <h5 class="mb-2 text-xl font-bold text-gray-900">タイトル</h5>
  <p class="mb-3 text-sm text-gray-600">本文テキスト。</p>
  <a href="#" class="inline-flex items-center text-blue-600 hover:underline">続きを読む →</a>
</div>

Static

Badge / Alert

Badge / Alertクラスのみ

New

情報メッセージ。

<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">New</span>

<div class="p-4 text-sm text-blue-800 rounded-lg bg-blue-50" role="alert">
  情報メッセージ。
</div>

Static

Progress Bar

Progress Barクラスのみ

<div class="w-full bg-gray-200 rounded-full h-2.5">
  <div class="bg-blue-600 h-2.5 rounded-full" style="width: 62%"></div>
</div>

Static

Rating

Ratingクラスのみ

4.8 / 5

<div class="flex items-center">
  <svg class="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 22 20">...</svg>
  <span class="ms-1 text-sm text-gray-600">4.8 / 5</span>
</div>

Static

Pagination

Paginationクラスのみ

<nav class="flex items-center justify-center">
  <ul class="inline-flex -space-x-px text-sm">
    <li><a href="#" class="px-3 py-2 border rounded-s-lg hover:bg-gray-100">前へ</a></li>
    <li><a href="#" class="px-3 py-2 border bg-blue-50 text-blue-600">1</a></li>
    <li><a href="#" class="px-3 py-2 border hover:bg-gray-100">2</a></li>
    <li><a href="#" class="px-3 py-2 border rounded-e-lg hover:bg-gray-100">次へ</a></li>
  </ul>
</nav>

Static

Breadcrumb

Breadcrumbクラスのみ

<nav class="flex text-sm">
  <ol class="inline-flex items-center space-x-1 md:space-x-2">
    <li><a href="#" class="text-gray-500 hover:text-gray-700">ホーム</a></li>
    <li class="flex items-center"><span class="mx-1 text-gray-400">/</span>
      <a href="#" class="text-gray-500 hover:text-gray-700">レポート</a></li>
    <li class="flex items-center"><span class="mx-1 text-gray-400">/</span>
      <span class="text-gray-900 font-medium">現在のページ</span></li>
  </ol>
</nav>

Static

Timeline

Timelineクラスのみ

●
要件定義
2026-07-01
●
開発
2026-07-14

<ol class="relative border-s border-gray-200 ms-3">
  <li class="mb-8 ms-6">
    <span class="absolute flex items-center justify-center w-6 h-6 bg-blue-100 rounded-full -start-3">●</span>
    <h3 class="text-sm font-semibold text-gray-900">要件定義</h3>
    <time class="block text-xs text-gray-400">2026-07-01</time>
  </li>
</ol>

Static

List Group

List Groupクラスのみ

項目1
項目2

<ul class="text-sm border border-gray-200 rounded-lg divide-y divide-gray-200">
  <li class="px-4 py-2">項目1</li>
  <li class="px-4 py-2">項目2</li>
</ul>

Static

Avatar / Spinner

Avatar / Spinnerクラスのみ

<img class="w-10 h-10 rounded-full" src="..." alt="avatar">

<svg class="w-6 h-6 text-gray-200 animate-spin fill-blue-600" viewBox="0 0 100 101">...</svg>

Static

Forms

Input / Select / Checkbox / Toggle / Rangeクラスのみ

チェックボックス

<input type="text" class="border border-gray-300 rounded-lg text-sm px-3 py-2 w-full" placeholder="入力してください">

<select class="border border-gray-300 rounded-lg text-sm px-3 py-2">
  <option>選択肢1</option><option>選択肢2</option>
</select>

<label class="inline-flex items-center gap-2 text-sm">
  <input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600"> チェックボックス
</label>

<input type="range" class="w-full h-2 bg-gray-200 rounded-lg accent-blue-600">

Custom Pattern

Library / Content Grid Card

Flowbite公式ではない汎用ブロックパターン。Mobbin風の「見つけやすさ」を狙ったカードグリッド。実写スクリーンショットの代わりに抽象的なSVGカバーアート（曲線1本以上＋幾何形状）をカテゴリ色で描き、カテゴリピル・タイトル・説明・更新日/所要時間のメタ情報フッターを添える。

Library / Content Grid CardカスタムCSS

カテゴリ

カードのタイトル

1〜2文の説明文。

更新: 3日前4 min

カテゴリ2

別のカード

説明文サンプル。

更新: 1週間前6 min

<div class="lib-grid-card" style="background:#fff; border:1px solid #e4e2ec; border-radius:12px; padding:20px;
  transition:transform .18s ease, box-shadow .18s ease; cursor:pointer;">
  <div style="height:72px; border-radius:8px; margin-bottom:14px; background:#e7edfc;
    display:flex; align-items:center; justify-content:center; overflow:hidden;">
    <svg viewBox="0 0 240 72" width="100%" height="72">
      <path d="M20 60 Q60 10 112 30" stroke="#2452e0" stroke-width="2.5" fill="none" stroke-linecap="round"/>
      <circle cx="120" cy="27" r="9" fill="#2452e0"/>
      <rect x="150" y="42" width="60" height="14" rx="7" fill="#2452e0" opacity="0.28"/>
    </svg>
  </div>
  <span style="...background:#e7edfc; color:#16339e;">カテゴリ名</span>
  <h3>カードのタイトル</h3>
  <p>1〜2文の説明文。</p>
  <div style="display:flex; justify-content:space-between; border-top:1px solid #e9eef6; padding-top:12px;">
    <span>更新: 3日前</span><span>4 min</span>
  </div>
</div>
<style>
  .lib-grid-card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px -12px rgba(20,40,90,0.18); border-color:#2452e0; }
</style>

要点：カバーアートは実写ではなく抽象SVG（曲線・円・矩形の組み合わせ）で、カテゴリを瞬時に判別させる記号として使う。意味色には必ず同色バッジを併記し、色だけに依存させない。出典（参考）: ユーザー提供のドキュメントポータルデザインシステムサンプルより一般化。

コンポーネントカタログ

Modal

Drawer (Offcanvas)

タイトル

Tabs

Accordion

質問1

Dropdown

Tooltip / Popover

Carousel

Toast (Dismiss)

Datepicker（別パッケージ）

Button / Button Group

Card

タイトル

Badge / Alert

Progress Bar

Rating

Pagination

Breadcrumb

Timeline

要件定義

開発

List Group

Avatar / Spinner

Forms

Library / Content Grid Card

カードのタイトル

別のカード