コンポーネント
WCAG AA/AAA アクセシビリティが組み込まれた無料の CSS のみの Tailwind CSS コンポーネント。JavaScript は不要で、フレームワークに依存せず、Django、HTMX、Laravel、React、Vue、およびあらゆるスタックと互換性があります。すぐに使用でき、カスタマイズも簡単です。
Frutjam ships 52+ CSS-only Tailwind CSS components — buttons, modals, forms, navigation, data display, and more — built for Tailwind CSS v4. Every component uses semantic class names (.btn, .card, .badge) that work alongside any Tailwind utility class. No JavaScript is bundled, no React context required, and no PostCSS plugins needed beyond Tailwind itself. Every component is WCAG AA accessible out of the box, with hand-tuned OKLCH color pairs that guarantee readable contrast on every surface. Because Frutjam is CSS-only and framework-agnostic, the same HTML markup works in Django templates, HTMX responses, Laravel Blade, Rails ERB, React JSX, or plain static HTML — without modification.
New to Frutjam?
Get started in seconds — two imports and you're ready to build.
アコーディオン
ネイティブの <details>/<summary> を使用する CSS のみの Tailwind CSS アコーディオン。 JavaScript を使用せずにコンテンツ セクションを展開したり折りたたんだりできます。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
アラート
CSS のみの Tailwind CSS アラート。情報、成功、警告、エラーのバリエーションが含まれます。ソフト スタイル、アイコン スロット、および非表示パターン。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
アバター
プロフィール画像用の CSS のみの Tailwind CSS アバター。サイズ xs ～ xl、グループ スタッキング、オンライン/オフライン ステータス インジケーター。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
バッジ
CSS のみの Tailwind CSS バッジ (プライマリ、セカンダリ、アクセント、情報、成功、警告、エラーのバリアント付き)。ソフト、アウトライン、ゴーストのスタイル、サイズは xs ～ lg。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
ブレッドクラム
CSS のみの Tailwind CSS ブレッドクラム ナビゲーション。カスタム セパレーターとアクセス可能なランドマーク マークアップを備えています。 WCAG AA は、Django、HTMX、Laravel、React、およびあらゆる Tailwind CSS v4 プロジェクトで動作します。
ボタン
プライマリ、セカンダリ、アクセント、ゴースト、アウトライン、ソフト バリアントを備えた CSS のみの Tailwind CSS ボタン。サイズ xs ～ xl、読み込み状態、無効、およびアイコン ボタン。 CSS のみの WCAG AA は、Django、HTMX、Laravel、React で動作します。
カード
アウトライン、シャドウ、フラット スタイルを備えた CSS のみの Tailwind CSS カード。コンパクト、デフォルト、ラージサイズ。カードの内容、カードのタイトル、カード フッターのスロット。 WCAG AA は、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
カルーセル
スクロールスナップを使用した CSS のみの Tailwind CSS カルーセル。ナビゲーション コントロールを備えた水平スライド レイアウト。JavaScript は必要ありません。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
チャット
CSS のみの Tailwind CSS チャット バブル コンポーネント。送受信メッセージの開始位置と終了位置、アバターとタイムスタンプのスロット。 WCAG AA は、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
チェックボックス
CSS のみの Tailwind CSS チェックボックス。プライマリ、セカンダリ、アクセント、セマンティック カラー バリエーションが含まれます。サイズxs～xl、状態未定。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
折りたたみ可能
ネイティブ <details> を使用した CSS のみの Tailwind CSS 折りたたみパネル。 JavaScript を使用せずにコンテンツ セクションを表示および非表示にします。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
コンボボックス
ライブ検索フィルタリングとアクセス可能なドロップダウン リストを備えた CSS のみの Tailwind CSS コンボボックス。キーボードナビゲーション、カラーバリエーション。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
カウントダウン
CSS のみの Tailwind CSS カウントダウン タイマー。日、時間、分、秒のアニメーション数字表示。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
差分
CSS のみの Tailwind CSS 差分ビューア。ドラッグ可能な分割線を使用してコンテンツを並べて比較できます。 JavaScriptは必要ありません。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
ディバイダー
CSS のみの Tailwind CSS ディバイダー - 水平および垂直、オプションの中央ラベル付き。色とサイズのバリエーション。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
引き出し
ネイティブ チェックボックス トグルを使用した CSS のみの Tailwind CSS ドロワー。 JavaScript を使用しないナビゲーションまたはフィルター用のスライドイン サイド パネル。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
フッター
複数列レイアウト、ロゴ、リンク、著作権スロットを備えた CSS のみの Tailwind CSS フッター。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆる Tailwind CSS v4 プロジェクトで動作します。
ヘッダ
CSS のみの Tailwind CSS ページ ヘッダー — ブランド、ナビゲーション、アクション スロットを備えたトップ バー レイアウト。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
ヒーロー
ランディング ページ用の CSS のみの Tailwind CSS ヒーロー セクション。見出し、説明、CTA が中央に配置された全幅レイアウト。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
インジケータ
要素の隅にバッジまたはドットをオーバーレイするための CSS 専用 Tailwind CSS インジケーター。カラーバリエーションと配置。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
入力
CSS のみの Tailwind CSS 入力。プライマリ、セカンダリ、アクセント、セマンティック カラー バリアントが含まれます。サイズ xs ～ xl、プレフィックスとサフィックスのアドオン スロット、ゴースト スタイル。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
参加する
CSS のみの Tailwind CSS 結合により、ボタン、入力、または選択を接続されたユニットにグループ化します。水平方向と垂直方向。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
KBD
キーボード ショートカットとキーの組み合わせを表示するための CSS のみの Tailwind CSS kbd コンポーネント。サイズバリエーション。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
リンク
CSS のみの Tailwind CSS は、プライマリ、セカンダリ、アクセント、ニュートラル カラー バリエーションとリンクします。ホバー下線とプレーンスタイル。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
読み込み中
CSS のみの Tailwind スピナー、ドット、リング、バーのアニメーションを備えた CSS 読み込みインジケーター。色とサイズのバリエーション、JavaScriptは必要ありません。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
マーキー
CSS のみの Tailwind CSS マーキーは、コンテンツとロゴを水平にスクロールします。 CSS 経由で速度と方向を制御します。JavaScript は使用しません。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
マスク
画像を円、スクイクル、ハート、六角形などの形状にクリッピングするための CSS のみの Tailwind CSS マスク。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
メニュー
CSS のみの Tailwind ナビゲーション リスト用の CSS 垂直メニュー。アクティブ、無効、およびアイコン項目の状態。サイズバリエーション。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
モーダル
ネイティブ <dialog> を使用した CSS のみの Tailwind CSS モーダル。レスポンシブなサイズ設定、背景、フォーカス トラップ。基本的な使用には JavaScript は使用しません。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
ナビバー
ブランド、ナビゲーション リンク、アクション スロットを備えた CSS のみの Tailwind CSS ナビゲーションバー。粘着性と透明のバリエーション。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
ポップオーバー
ネイティブ ポップオーバー API を使用した CSS のみの Tailwind CSS ポップオーバー。ツールチップとドロップダウンのフローティング コンテンツ パネル。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
進捗
CSS のみの Tailwind CSS 進行状況バー。プライマリ、セカンダリ、アクセント、セマンティック カラー バリエーションが含まれます。サイズはXS～XL。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
放射状の進歩
CSS のみ Tailwind CSS 放射状進行状況 — パーセンテージ表示付きの円形進行状況リング。色とサイズのバリエーション、JavaScript なし。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
無線
CSS のみの Tailwind CSS ラジオ ボタン。プライマリ、セカンダリ、アクセント、セマンティック カラー バリエーションが含まれます。サイズはXS～XL。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
範囲
CSS のみの Tailwind CSS 範囲スライダー。プライマリ、セカンダリ、アクセント、セマンティック カラー バリエーションが含まれます。サイズはXS～XL。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
評価
CSS のみの Tailwind CSS スターおよび心拍数コンポーネント。サイズは XS ～ XL、ハーフスターのサポート、JavaScript は必要ありません。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
選択
CSS のみの Tailwind CSS 選択ドロップダウンには、プライマリ、セカンダリ、アクセント、セマンティック カラー バリエーションが含まれます。サイズはxs～xl、ゴーストスタイル。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
サイドバー
サイド ナビゲーション パネル用の CSS のみの Tailwind CSS サイドバー。折りたたみ可能。ナビゲーション項目の状態とセクション見出しが表示されます。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
スケルトン
プレースホルダー UI 用の CSS のみの Tailwind CSS スケルトン ローダー。パルスアニメーションを備えた円、長方形、およびテキスト線の形状。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
ステータス
メトリクスを表示するための CSS のみの Tailwind CSS 統計。値、ラベル、説明、およびアイコンのスロット。レスポンシブなグリッドレイアウト。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
状態
CSS のみの Tailwind CSS ステータス ドット インジケーター。プライマリ、成功、警告、エラーの色のバリエーションがあります。サイズはXS～XL。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
ステップ
マルチステップ ウィザードおよび進行状況インジケーター用の CSS のみの Tailwind CSS ステップ。水平および垂直レイアウト、ステップごとのカラーバリエーション。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
表面
テーマに沿った背景とテキストの色をコンテナに適用するための CSS のみの Tailwind CSS サーフェス。すべてのカラーバリエーション。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
スワップ
CSS のみの Tailwind 2 つの要素を切り替えるための CSS スワップ。 JavaScript を使用せずにアニメーションを反転、回転、フェードできます。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
テーブル
ゼブラストライプ、コンパクトなデフォルトサイズ、固定された列、および行ホバー状態を備えた CSS のみの Tailwind CSS テーブル。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
タブ
CSS のみの Tailwind CSS タブには、ボーダー、リフト、ボックス、ピル スタイルのバリアントが含まれます。アクティブな状態とサイズ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
タグ
カラーバリエーション、ソフトスタイル、取り外し可能なボタンを備えた CSS のみの Tailwind CSS タグ (チップ)。サイズはXS〜LG。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
テキストエリア
CSS のみの Tailwind CSS テキストエリアには、プライマリ、セカンダリ、アクセント、セマンティック カラーのバリエーションが含まれます。サイズはXS〜XL、ゴーストスタイル。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
タイムライン
CSS のみの Tailwind 時系列イベント リスト用の CSS タイムライン。アイコン、コンテンツ、コネクタ ライン スロットを備えた垂直レイアウト。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
トースト
CSS のみの Tailwind CSS トーストによる通知の位置設定 (上、下、開始、終了、中央の配置)。レイアウトにJavaScriptは使用しません。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
トグル
CSS のみの Tailwind CSS トグル スイッチで、プライマリ、セカンダリ、アクセント、セマンティック カラー バリエーションを備えています。サイズはXS～XL。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
ツールチップ
CSS のみの Tailwind CSS ツールチップは上下左右に配置されます。カラーバリエーション、JavaScriptは必要ありません。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
Frequently asked questions
Are all Frutjam components CSS-only?
Yes — the vast majority of components are pure CSS with zero JavaScript. Buttons, badges, cards, forms, alerts, modals, drawers, tabs, and more all work with plain HTML and CSS. A small number of components that have no native HTML equivalent (toast positioning, combobox filtering, carousel controls) offer optional lightweight JS helpers, but the CSS layout and styling requires no JavaScript at all.
Do Frutjam components work with Django, HTMX, and Laravel?
Yes — Frutjam is framework-agnostic. Because every component is CSS-only, it works with any server-rendered stack. Django templates, HTMX, Laravel Blade, Rails ERB, plain HTML — if you can output HTML, Frutjam works. No React, no build pipeline, no JavaScript framework required.
Are the components WCAG accessible?
Yes — WCAG AA contrast is guaranteed on every component. Every color pair (--color-primary / --color-on-primary, etc.) is hand-tuned in OKLCH to meet WCAG AA contrast requirements. Semantic HTML elements are used throughout — native <dialog> for modals, <details> for accordions, and proper ARIA attributes where needed.
How do Frutjam components compare to DaisyUI?
Both are CSS-only Tailwind CSS component libraries, but Frutjam is built specifically for Tailwind CSS v4, uses OKLCH color tokens with guaranteed WCAG AA contrast pairs, and ships a free MCP server (Cherry) for AI editor integration — DaisyUI's equivalent (Blueprint) is paid. Frutjam also provides explicit on-{color} token pairs rather than computing foreground colors at runtime.
Do I need to install anything besides Tailwind CSS?
Just one extra line. Add @plugin "frutjam"; to your CSS file after @import "tailwindcss"; and install via npm i -D frutjam. That's it — no PostCSS plugins, no JavaScript config, no separate stylesheet to import. All components are available immediately and treeshaken automatically by Tailwind.
Can I use Frutjam components with React or Next.js?
Yes. Since Frutjam is CSS-only, you use components the same way in any stack — just apply the class names. For the few components that benefit from JavaScript control (modal open/close, toast, carousel), Frutjam ships optional React hooks (frutjam/react) that wrap native DOM calls with no extra dependencies.