オープンソース · MITライセンス · 永久無料
高速開発用のアクセス可能な CSS 専用 Tailwind CSS コンポーネント ライブラリ
Frutjamはアクセシビリティ・標準準拠・Tailwind CSSとのシームレスな統合を重視する開発者のために作られた、超高速のオープンソースUIライブラリです。
W3C準拠、SEO対応、使いやすい。
高いカスタマイズ性
Tailwind CSSユーティリティクラスで動作
Frutjamはすぐに使えるクリーンなコンポーネントクラスを提供しつつ、すべてのTailwindユーティリティをカスタマイズに利用できます。Frutjamコンポーネントにユーティリティクラスを重ねるだけで、スペース・色・レイアウト・インタラクションを簡単に変更できます。
カスタマイズ可能なコンポーネント
Frutjam の各コンポーネントは Tailwind ユーティリティを受け入れるように設計されているため、カスタム CSS を記述せずにスタイルを調整できます。
ユーティリティファーストの制御
text-lg、px-6、bg-base-200 などの Tailwind クラスを使用して、コンポーネントを数分で調整します。
すぐに始めよう
2行のインポートで開発開始。ビルドツール不要・設定不要・ランタイム不要。
ステップ1
npm経由でインストールする
1 つのコマンドで Frutjam をプロジェクトに追加します。
npm install frutjam |
ステップ2
CSS にインポートする
Tailwind と Frutjam の両方をスタイルシートに追加します。
1 2 | @import "tailwindcss"; @import "frutjam"; |
ステップ3
きれいなコンポーネントを使用する
長いユーティリティ チェーンの代わりにセマンティック クラスを作成します。
1 2 3 | <button class="btn btn-primary"> Get Started </button> |
実際に見てみよう
実際のコンポーネント、実際のコード - コピーして出荷します。
ボタン
1 2 3 4 5 6 | <div class="flex flex-wrap gap-2"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-outline">Outline</button> <button type="button" class="btn btn-soft btn-success">Success</button> <button type="button" class="btn btn-soft btn-error">Danger</button> </div> |
バッジとラベル
1 2 3 4 5 6 7 | <div class="flex flex-wrap gap-2"> <span class="badge badge-primary">Primary</span> <span class="badge badge-success">Active</span> <span class="badge badge-warning">Pending</span> <span class="badge badge-error">Error</span> <span class="badge">Default</span> </div> |
ボタンのサイズ
1 2 3 4 5 6 | <div class="flex flex-wrap items-center gap-2"> <button type="button" class="btn btn-primary btn-xs">XSmall</button> <button type="button" class="btn btn-primary btn-sm">Small</button> <button type="button" class="btn btn-primary">Base</button> <button type="button" class="btn btn-primary btn-lg">Large</button> </div> |
カード
1 2 3 4 5 6 7 8 9 10 | <div class="card card-sm card-outline"> <div class="card-content"> <h4 class="card-title">Card Title</h4> <p>A clean, accessible card component ready to use in any project.</p> <div class="flex gap-2 mt-3"> <button type="button" class="btn btn-primary btn-sm">Action</button> <button type="button" class="btn btn-outline btn-sm">Cancel</button> </div> </div> </div> |
Frutjam UI ライブラリを使用する理由?
Frutjam は、Tailwind CSS v4 で構築された無料のオープンソース CSS 専用 UI ライブラリで、アクセシビリティと開発の高速化に重点を置いています。複雑な JavaScript 構成や巨大な JS バンドルは必要ありません。これは、JavaScript オーバーヘッドがゼロの WCAG 準拠コンポーネントを必要とするチームにとって、軽量の DaisyUI の代替手段となります。
@import "frutjam" をスタイルシートに追加するだけで開始できます。 Frutjam を使用すると、HTML 内に長い Tailwind CSS クラス リストを含める必要がなくなります。クリーンでセマンティックなクラスを使用するだけで、コンポーネントを簡単に構築できます。シンプルな CSS 変数を使用してテーマを簡単にカスタマイズし、すべてのコンポーネントが即座に更新されます。
W3C標準
最新の Web アプリに適したクリーンで有効な HTML。
アクセシビリティ第一
すべてのコンポーネントは a11y を念頭に置いて構築されています。
色のコントラスト
コンポーネントは、そのままの状態で WCAG AA/AAA カラー コントラスト チェックに合格します。
SEO に優しい
検索エンジンの可視性を高めるためのセマンティック マークアップ。
開発者に優しい
シンプルで直感的な API と簡単な統合。
CSS と HTML を最初に
JavaScript によるロックインはありません。スタイルと構造が最優先されます。
Tailwind CSS サポート
既存の Tailwind ワークフローと完全に連携します。
RTL サポート
右から左に記述する言語と完全に互換性があります。
レスポンシブ
どのデバイス、どの画面サイズでも見栄えがよくなります。
積極的にメンテナンス
新しいコンポーネント、アップデート、コミュニティのサポート。
専門的なテーマ
ライトモードとダークモードを切り替えるか、独自のモードを作成します。
事前構築されたレイアウトとコンポーネント
あらゆるプロジェクトにすぐに使えるビルディングブロック。
オープンソース
MIT ライセンスを取得しており、コミュニティ主導型です。
プラグインのサポート
Markdown Text Editor などの便利なプラグインを使用して Frutjam を拡張します。
DOM サイズを削減する
ネストされた要素や不要な要素が多数あると、レンダリングが遅くなる可能性があります。コンポーネント構造を簡素化し、パフォーマンスと保守性を向上させます。
Google PageSpeed Insights で 100/100
Frutjam UI ライブラリを使用して、パフォーマンス、アクセシビリティ、ベスト プラクティス、SEO で完璧な 100 点を達成します。この Web サイトは完全に Frutjam UI で構築されており、Google PageSpeed Insights で総合スコア 100/100 を達成しています。
Web サイトの実行速度が向上し、ユーザー エクスペリエンスが向上し、検索ランクが高くなります。今日の AI 主導の Web では、高速なサイトが優先されます。AI ツールは Web サイトをリアルタイムで頻繁にスキャンし、計算リソースを無駄にしない高速で効率的なページを好みます。将来に対応した UI ライブラリを使用して、よりスマートに構築します。
純粋な CSS、JavaScript は必要ありません。フレームワークに依存せず、どこでも完全に互換性があります。
Frutjam UI ライブラリは純粋な CSS で記述されているため、巨大な JavaScript バンドルは必要ありません。これにより、プロジェクトが軽量になり、読み込み時間が短縮され、パフォーマンスがよりスムーズになるように最適化されます。 React、Vue、Angular、Next.js、Django、HTMX、Laravel、または単純な HTML を使用しているかどうかに関係なく、あらゆる Web フレームワークやバックエンドで完全に動作します。
最新のフレームワーク向け
あなたのフレームワークは高速です。そのままにしておいてください。
Next.js、Svelte、Vue は、サーバー レンダリング、最小限の JS、即時のハイドレーションなど、驚異的なパフォーマンスと SEO を実現するように設計されています。しかし、モーダルのような単純なもののために、肥大化した JavaScript でいっぱいの重いコンポーネント ライブラリを追加した瞬間、それらのフレームワークが約束するすべてを犠牲にすることになります。
Frutjam は設計上 CSS ファーストかつネイティブ ファーストです。 JavaScript バンドルはありません。実行時のオーバーヘッドはありません。レイアウトの変更はありません。フレームワークのパフォーマンスの上限は、単なる理論上のパフォーマンスではなく、実際のパフォーマンスになります。
ゼロレイアウトシフト
純粋な CSS コンポーネントはページとともに即座にレンダリングされます。UI を描画するために JavaScript は必要ありません。累積レイアウト シフト (CLS) は 0 のままで、完璧な PageSpeed スコアが維持されます。
JS オーバーヘッドなし
フレームワークがバンドル分割から保存する JavaScript のすべての KB を、Frutjam が追加し直すことはありません。ボタン、カード、モーダル、バッジ - すべて CSS で。インタラクティブ化までの時間が短縮されます。
成果をもたらすSEO
セマンティック HTML、W3C 有効なマークアップ、およびすぐに使える WCAG カラー コントラスト。検索エンジンはクリーンな構造を読み取ります。最新のフレームワークと Frutjam を組み合わせると、ページがランク付けされ、パフォーマンスが向上します。
醜い HTML は不要、クラス名が減り、メンテナンスが容易になり、開発が迅速化されます。
面倒なクラスはもう不要: 1 つのクラスですべてが完了します。すべての要素、すべてのページ、すべてのプロジェクトに対して毎回乱雑なクラスを何度も何度も記述する代わりに、Frutjam コンポーネント クラス名を使用すると、乱雑なクラスに悩まされることなく、メンテナンスとスケーリングが容易になり、より迅速な開発が可能になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // Styling a simple button in Tailwind css clutter of utility class <button class="bg-gray-100 text-gray-900 text-sm px-3.5 border font-semibold duration-200 py-2 transition-all hover:border-gray-300 hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 inline-flex gap-2 rounded-sm active:border-gray-300 active:bg-gray-200 active:shadow-none text-center align-middle cursor-pointer border-gray-200 dark:border-gray-700 dark:bg-neutral-700 dark:text-gray-300 dark:hover:border-gray-950 dark:hover:bg-gray-950 dark:focus-visible:outline-gray-200 dark:active:border-gray-950 dark:active:bg-gray-900"> Button </button> // Styling a simple button in frutjam component class <button class="btn"> Button </button> |
<button type="button" class="btn">Button</button> |
テーマとカスタマイズ
Frutjam はテーマに単純な CSS 変数を使用します。 1 つの変数を変更すると、すべてのコンポーネントが即座に更新されます。リビルドやクラスの変更は必要ありません。
1 2 3 4 5 6 7 8 9 10 11 12 13 | /* Override the default theme in your CSS */ :root { --color-primary: oklch(55% 0.2 250); --color-primary-content: #fff; --radius-base: 0.5rem; --font-base: "Inter", sans-serif; } /* Dark mode overrides */ [data-theme="dark"] { --color-base-100: oklch(15% 0.01 250); --color-base-content: oklch(90% 0.01 250); } |
カスタマイズできるもの
色
プライマリ、セカンダリ、アクセント、エラー、成功、警告、およびすべての基本シェードは、それぞれ単一の CSS 変数を介して行われます。
境界半径
--radius-base は、すべてのコンポーネントを一度にスケーリングします。つまり、1 つの変数を変更すると、すべての要素が更新されます。
タイポグラフィ
フォント ファミリー、サイズ スケール、行の高さ - 書体システムを一度設定すると、すべてのコンポーネントがそれを継承します。
間隔とサイズ設定
コンポーネントのパディングとサイズのバリアント — 組み込みのサイズ修飾子を使用するか、スペース トークンをグローバルにオーバーライドします。
コンポーネントライブラリ
あらゆるユースケースに対応する、構築済みのアクセス可能なコンポーネントのコレクションが増え続けています。
ボタンとフォーム
ボタンのバリアント、入力、チェックボックス、選択、および完全なフォーム レイアウト。
モーダルとダイアログ
アクセス可能なモーダル ダイアログ、ドロワー、確認プロンプト。
ナビゲーション
ナビゲーションバー、サイドバー、ブレッドクラム、タブナビゲーション。
カードとレイアウト
カードのバリエーション、グリッド システム、ページ レイアウトのスケルトン。
アラートとトースト
ステータス アラート、通知バナー、インライン フィードバック メッセージ。
バッジとタグ
ステータス バッジ、カテゴリ タグ、およびラベル コンポーネント。
リストとテーブル
データテーブル、順序付き/順序なしリスト、および定義リスト。
プラグイン
マークダウン エディター、構文ハイライター、その他の便利な拡張機能。
コミュニティプラグイン
バックエンド開発者に愛されています。ネイティブファーストのMarkdownエディター。
ほとんどのエディターは標準的な Web ワークフローを破っています。 MarkdownEditor はこれを採用しており、<textarea> の最上部に直接配置されているため、バックエンドは何も変更されたことを認識しません。 It just works with form method="POST", standard DOM access, and every server framework out of the box.
プレーンな <textarea> を 1 行の JS に置き換えると、Django、Laravel、または PHP コントローラーはそのままで、ユーザーのエクスペリエンスが 10 倍向上します。
-
データ バインディングは必要ありません - そのままの状態で
form method="POST"で動作します -
標準アクセス — 他の入力と同様に、
element.valueを使用して読み取りおよび書き込みを行います - バックエンドに依存しない — PHP、Django、Node.js、Laravel、Rails — すべてプレーン文字列を読み取るだけです
- ~116 KB — ハイブリッド WYSIWYG + プレーン モード、RTL、画像アップロード、ライブ プレビュー、CSS 競合なし
ライブデモ — 試してみてください:
ドロップイン置換 — 1 つのクラス、1 行の JS。バックエンドは変更なし。
ネイティブフォームの統合
標準の <textarea> を拡張します。通常の <form> で送信し、request.POST['name'] 経由でコンテンツにアクセスします。 preventDefault() や FormData 構造はありません。
高度な画像アップロード
API 経由でサーバーのアップロードを構成します。画像は CDN に直接送信されます。データベース内の Base64 の肥大化、SEO ペナルティ、メモリを大量に消費するペイロードは発生しません。
高性能
デバウンスされたプレビュー更新、キャッシュされたスタイル計算、競合のないキーボード処理。入力ラグなしで数千行を処理します。また、すべてのエディター スタイルは完全にスコープされているため、CSS フレームワークと安全に共存できます。
Frutjamと比べてどうですか？
無料でアクセス可能な代替手段として、Frutjam がプレーンな Tailwind CSS、Bootstrap、DaisyUI とどのように比較できるかをご覧ください。
| 特徴 | Frutjam | デイジーUI | プレーン追い風 | ブートストラップ |
|---|---|---|---|---|
| CSS のみ (JavaScript は必要ありません) | ✓ | ✓ | ✓ | 部分的 |
| セマンティックコンポーネントクラス | ✓ | ✓ | ✗ | ✓ |
| WCAG AA コントラストはすべてのコンポーネントで保証されています | ✓ | マニュアル | マニュアル | 部分的 |
| Tailwind ユーティリティと連携して動作します | ✓ | ✓ | ✓ | ✗ |
| CSS 変数のテーマ設定 | ✓ | ✓ | ✓ | 限定 |
| 100/100 のページ速度を達成可能 | ✓ | ✓ | さまざま | さまざま |
| RTLのサポート | ✓ | 部分的 | 部分的 | ✓ |
| フレームワークに依存しない (Django、HTMX、Laravel) | ✓ | ✓ | ✓ | ✓ |
| プレーンな CSS 変数によるテーマ、構成ファイルなし | ✓ | 部分的 | マニュアル | ✗ |
| AI エディターの統合 (MCP / コンテキスト) | ✓ 無料 | 有料 | ✗ | ✗ |
AIエディターの統合
クロード コード、カーソル、またはコパイロットを使用しますか?
Cherry MCP は、Frutjam を AI エディタに直接接続します。ブラウザからコピー＆ペーストすることなく、正確なコンポーネント コード、正しいクラス名、最新のドキュメントを取得します。
Cherry MCP を試してみるよくある質問
フルジャムについて知っておくべきことすべて。
フルジャムは無料で使用できますか?
はい — Frutjam は MIT ライセンスを取得しており、完全に無料です。個人プロジェクト、クライアントの仕事、商用製品で制限なく使用でき、帰属も必要ありません。
Frutjam は商用プロジェクトに適していますか?
はい。 Frutjam は MIT ライセンスに基づくオープンソースであり、ロイヤルティや制限なしで個人製品および商用製品の両方で自由に使用できます。
Frutjam は Tailwind CSS を置き換えますか?
いいえ — Frutjam は Tailwind の上に構築されています。これは、すべての Tailwind ユーティリティ クラスを同時に使用できるようにしながら、セマンティック コンポーネント クラス (.btn、.card、.badge) を追加するレイヤーと考えてください。
Frutjam を使用するには JavaScript が必要ですか?
JavaScriptは必要ありません。 Frutjam は純粋な CSS です。ボタン、カード、バッジ、フォームなどのコンポーネントは、JS ランタイムなしで完全に動作します。モーダルやドロップダウンなどのインタラクティブなパターンの場合、Alpine.js や HTMX などの軽量ライブラリとうまく組み合わせます。
Frutjam を React、Vue、または Angular で使用できますか?
はい — Frutjam はフレームワークに完全に依存しません。 React、Vue、Angular、Svelte、Next.js、Nuxt、Laravel、Django、プレーン HTML など、あらゆるテンプレート システムや JS フレームワークで動作します。 CSS をインポートしてクラスを使用するだけです。
Frutjam はスクリーン リーダーからアクセスできますか?
はい。 Frutjam は WAI-ARIA ガイドラインに従って、適切な役割、キーボード ナビゲーション サポート、WCAG AA/AAA カラー コントラストをすぐに使用できるため、追加の設定なしですべてのユーザーがアクセスできるようになります。
Frutjam を使用すると PageSpeed は向上しますか?
はい。 Frutjam の CSS ファーストのアプローチは、レンダリングをブロックする JavaScript を完全に回避します。 W3C 有効なマークアップ、適切な色のコントラスト、およびネイティブ HTML セマンティクスと組み合わせることで、Core Web Vitals の向上と 100/100 PageSpeed スコアに直接貢献します。
色、フォント、半径をカスタマイズするにはどうすればよいですか?
スタイルシート内の CSS 変数をオーバーライドします。--color-primary、--font-base、--radius-base などを設定します。すべてのコンポーネントは、HTML 内の再構築やクラスの変更を行わずに、即座に変更を反映します。
ブログより
Frutjam の構築と UI への CSS ファーストのアプローチについての考え。
The Best DaisyUI Alternative: CSS-Only Tailwind Components Without JavaScript
Why developers are switching from DaisyUI to Frutjam — a CSS-only Tailwind CSS component library that passes WCAG AA by default and requires zero JavaScript.
Why I Stopped Using JavaScript-Heavy UI Libraries (And Built a CSS-First Tailwind Component Library)
Achieve 100% PageSpeed scores by default. A guide to building high-performance, RTL-ready platforms using native HTML5 and CSS-first components.
オープンソース&永久無料
コミュニティに参加する
Frutjam はオープンソースであり、コミュニティ主導型です。コミュニティからのコンポーネント、修正、アイデアはすべて、すべての人にとってより良いものになります。
バグが見つかりましたか?機能リクエストがありますか?コンポーネントに貢献したり、ドキュメントを改善したりしたいですか?ぜひお越しください。