Getting Started with Frutjam

Frutjam is a free CSS-only Tailwind CSS v4 UI library. Zero JavaScript, WCAG AA/AAA accessible, framework-agnostic. Build modern interfaces with semantic components that work with Django, HTMX, Laravel, React, and any stack.

沒有複雜的設定 - 它使用與 Tailwind CSS 相同的配置，因此您可以堅持使用您已經知道的內容。如果您熟悉 Bootstrap，組件名稱會感覺直觀且易於記住。

您可以將 Tailwind CSS 變體前綴（如 dark:、sm:、lg:、xl:、rtl: 和 ltr: 與我們的任何實用程式類別一起使用。

採用速度優先框架的現代 UI 工程

Frutjam 是一個開源 Tailwind CSS v4 UI 庫 - 旨在促進快速 Web 開發的高級抽象。將其視為一個工具包，可將原始實用程式類別轉換為語義化、可用於生產的元件，從而使您能夠使用更少的程式碼建立現代介面。

它解決什麼問題？

大多數開發人員都面臨效用疲勞，花費大量時間為按鈕和輸入等基本元素編寫長長的類鏈。 Frutjam 透過提供即插即用生態系統消除了這種摩擦。

冗餘樣板：您無需為每個項目重新發明輪子，而是可以獲得開箱即用的處理焦點狀態、懸停轉換和響應行為的預構建組件
效能膨脹：與重型 JavaScript 框架不同，Frutjam 優先考慮「純 CSS」方法，確保您的應用程式保持輕量級和快速
合規障礙：建立可存取且 SEO 友善的介面非常複雜。該庫使用語義標記和乾淨的 HTML 來確保您的網站本質上符合 W3C 標準

如果您符合以下條件，Frutjam 就適合您：

厭倦了重複編寫數千個實用程式類別名稱
需要在創紀錄的時間內交付可訪問、SEO 友好的登陸頁面和 SaaS 應用程式
想要一個在任何環境下都完全相容的一致設計系統嗎？
偏好輕量級、與框架無關的解決方案，強制 JavaScript 依賴項為零

快速開發的核心功能

該工具包遵循複製、貼上和建造理念，提供專業級前端工程所需的一切

廣泛的組件庫：包括導覽列、模態框、手風琴和精煉資料表等基本元素
預組裝區塊：使用定價部分、標題和英雄區域的佈局區塊節省時間
Berry 主題系統：在 Snowberry（淺色）和 Darkberry（深色）等內建主題之間切換，或使用 OKLCH CSS 變數建立您自己的主題
輔助使用優先設計：每個組件都遵循 ARIA 角色和鍵盤導航的最佳實踐。所有顏色對都是手動調整的 OKLCH 值，經驗證可透過 WCAG AA 對比度，而不是自動計算的猜測。
與框架無關：無論您使用的是 React、Next.js、Vue、Django、HTMX、Laravel 還是簡單的靜態 HTML，都可以無縫運作

技術效率

與標準的實用程式優先工作流程相比，透過使用語義類別名稱，您可以顯著減小 HTML 大小。這會產生更乾淨、更易於維護的程式碼庫，從長遠來看，團隊更容易管理。該程式庫嚴格建立在 Tailwind CSS 之上，確保您保留實用程式引擎的所有自訂功能，同時獲得基於元件的系統的速度。

準備好開始了嗎？開始安裝 →