UI 區塊和部分 - 建置速度更快
僅 CSS Tailwind CSS UI 區塊和部分。沒有 JavaScript，可存取 WCAG AA，與框架無關。複製貼上英雄、標題、定價部分和功能塊。適用於 Django、HTMX、Laravel、React 和任何堆疊。
塊是由 Frutjam 組件組裝而成的可用於生產的頁面部分。每個區塊都是獨立的 HTML - 將其放入任何 Django 模板、Laravel Blade 檔案、HTMX 頁面或 React 元件中，它會立即運行。區塊會自動繼承您的活動 Frutjam 主題，因此在淺色、深色或自訂主題之間切換不需要更改區塊 HTML。所有區塊僅支援 CSS，可存取 WCAG AA，並為 Tailwind CSS v4 建立 - 沒有 JavaScript，沒有超出 Tailwind 本身的建置管道。
標頭
僅 CSS Tailwind CSS 標題塊，帶有導航列、品牌和移動抽屜。黏性、透明和響應式佈局變體。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
英雄
僅 CSS Tailwind CSS 英雄區塊 — 具有居中、分割和圖片佈局的現成著陸頁部分。無需 JavaScript，可存取 WCAG AA。適用於 Django、HTMX、Laravel、React 和任何堆疊。
定價
僅 CSS Tailwind CSS 定價區塊使用卡片和按鈕元件建構。複製貼上帶有等級、功能清單和 CTA 的定價表。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
什麼是塊？
區塊是透過將 Frutjam 元件組合在一起來建構的較大的現成頁面部分。元件是單一 UI 元素（按鈕、卡片、徽章），區塊是完整的佈局部分（英雄、定價表、網站標題），可以複製並貼上到您的專案中。
僅 CSS
每個區塊都是使用 Frutjam 元件和 Tailwind CSS 實用程式建立的 - 零 JavaScript，沒有額外的依賴項。
複製貼上準備就緒
每個區塊都是獨立的 HTML。將其貼到任何 Django 模板、Laravel Blade、HTMX 頁面或 React 元件中。
主題感知
區塊會自動繼承您的活動 Frutjam 主題 - 切換主題並且所有區塊都會更新，無需進行任何更改。
塊和組件有什麼區別？
元件是單一可重複使用的 UI 元素—按鈕、卡片、徽章。區塊是一個完整的頁面部分，它將多個元件組合成一個佈局 - 英雄部分、定價表、帶有導航欄的網站標題和移動抽屜。使用元件建立自訂佈局；使用區塊進行快速頁面組裝。
塊可以與 Django、HTMX 和 Laravel 一起使用嗎？
是的－區塊是使用 Frutjam 元件類別的純 HTML。它們適用於任何模板系統：Django、HTMX、Laravel Blade、Rails ERB、Jinja2 或靜態 HTML。沒有 JavaScript 框架，沒有超出 Tailwind CSS 本身的建置步驟。
是否添加了更多塊？
是的——定期添加新區塊。專業版和團隊版計劃包括存取高級版塊，包括功能部分、推薦、CTA 和整頁模板。