コンポーネント
WCAG AA/AAA アクセシビリティが組み込まれた無料の CSS のみの Tailwind CSS コンポーネント。JavaScript は不要で、フレームワークに依存せず、Django、HTMX、Laravel、React、Vue、およびあらゆるスタックと互換性があります。すぐに使用でき、カスタマイズも簡単です。
Frutjam は、Tailwind CSS v4 用に構築された 52 以上の CSS 専用の Tailwind CSS コンポーネント (ボタン、モーダル、フォーム、ナビゲーション、データ表示など) を出荷しています。すべてのコンポーネントは、Tailwind ユーティリティ クラスと並行して動作するセマンティック クラス名 (.btn、.card、.badge) を使用します。 JavaScript はバンドルされておらず、React コンテキストも必要なく、Tailwind 自体以外に PostCSS プラグインも必要ありません。すべてのコンポーネントは、箱から出してすぐに WCAG AA にアクセスでき、手作業で調整された OKLCH カラー ペアにより、あらゆる表面で読み取り可能なコントラストが保証されます。 Frutjam は CSS のみでフレームワークに依存しないため、同じ HTML マークアップが、変更することなく、Django テンプレート、HTMX 応答、Laravel Blade、Rails ERB、React JSX、またはプレーンな静的 HTML で機能します。
Frutjamは初めてですか?
数秒で始められます。2 回のインポートでビルドの準備が完了します。
アコーディオン
ネイティブ `<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-only Tailwind CSS combobox with live search filtering and accessible dropdown list.キーボードナビゲーション、カラーバリエーション。 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、およびあらゆるスタックで動作します。
ページネーション
CSS のみの Tailwind 番号付きページの CSS ページネーション、前/次矢印、省略記号ギャップ、アクセス可能な無線入力、およびページ ジャンプ選択。 JavaScriptは必要ありません。 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-only Tailwind CSS radio buttons with primary, secondary, accent, and semantic color variants.サイズは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、およびあらゆるスタックで動作します。
よくある質問
Frutjam コンポーネントはすべて CSS のみですか?
はい、コンポーネントの大部分は JavaScript を含まない純粋な CSS です。ボタン、バッジ、カード、フォーム、アラート、モーダル、ドロワー、タブなどはすべて、プレーンな HTML と CSS で動作します。ネイティブ HTML に相当するものを持たない少数のコンポーネント (トースト位置決め、コンボボックス フィルタリング、カルーセル コントロール) はオプションの軽量 JS ヘルパーを提供しますが、CSS レイアウトとスタイル設定には JavaScript はまったく必要ありません。
Frutjam コンポーネントは Django、HTMX、Laravel で動作しますか?
はい — Frutjam はフレームワークに依存しません。すべてのコンポーネントは CSS のみであるため、サーバーでレンダリングされた任意のスタックで動作します。 Django テンプレート、HTMX、Laravel Blade、Rails ERB、プレーン HTML — HTML を出力できる場合は、Frutjam が機能します。 React、ビルド パイプライン、JavaScript フレームワークは必要ありません。
WCAG コンポーネントにアクセスできますか?
はい — WCAG AA コントラストはすべてのコンポーネントで保証されます。 WCAG AA コントラスト要件を満たすために、すべての色のペア (--color-primary / --color-on-primary など) が OKLCH で手動で調整されます。セマンティック HTML 要素が全体で使用されます。モーダルにはネイティブ <dialog>、アコーディオンには <details>、必要に応じて適切な ARIA 属性が使用されます。
Frutjam コンポーネントは DaisyUI とどう違うのですか?
どちらも CSS 専用の Tailwind CSS コンポーネント ライブラリですが、Frutjam は Tailwind CSS v4 用に特別に構築されており、WCAG AA コントラスト ペアが保証された OKLCH カラー トークンを使用し、AI エディタ統合用の無料の MCP サーバー (Cherry) を同梱しています (DaisyUI の同等物 (Blueprint) は有料です)。 Frutjam は、実行時に前景色を計算するのではなく、明示的な on-{color} トークン ペアも提供します。
Tailwind CSS 以外に何かインストールする必要がありますか?
追加の行を 1 行だけ追加します。 CSS ファイルの @import "tailwindcss"; の後に @plugin "frutjam"; を追加し、npm i -D frutjam 経由でインストールします。それだけです。PostCSS プラグイン、JavaScript 設定、インポートする個別のスタイルシートは必要ありません。すべてのコンポーネントはすぐに利用可能であり、Tailwind によって自動的にツリーシェイクされます。
React または Next.js で Frutjam コンポーネントを使用できますか?
はい。 Frutjam は CSS のみであるため、どのスタックでも同じようにコンポーネントを使用できます。クラス名を適用するだけです。 JavaScript コントロールの恩恵を受けるいくつかのコンポーネント (モーダル オープン/クローズ、トースト、カルーセル) については、Frutjam には、追加の依存関係なしでネイティブ DOM 呼び出しをラップするオプションの React フック (frutjam/react) が同梱されています。