跳至主要內容
Frutjam logo Frutjam
v2.2.2
Theme

開源 · 麻省理工學院授權 · 永久免費

可存取的純 CSS Tailwind CSS 元件庫，用於快速開發

Frutjam 是一個速度極快的開源 UI 庫，專為關心可訪問性、標準以及與 Tailwind CSS 無縫集成的開發人員而構建。

符合 W3C、SEO 友好且易於使用。

在 GitHub 上查看 開始使用
Leave a review on Product Hunt A Product Hunt review badge for Frutjam encouraging users to leave feedback. LEAVE A REVIEW ON Product Hunt
頁面速度得分
100/100
效能·可訪問性·SEO
執照
MIT
永久免費，無任何限制
JS 依賴
0
純 CSS，無需 JavaScript
無障礙
WCAG
開箱即用，符合 AA/AAA 標準

高度可自訂

由 Tailwind CSS 實用程式類別提供支持

Frutjam 為您提供開箱即用的乾淨組件類，同時讓每個 Tailwind 實用程式都可用於自訂。使用 Frutjam 元件頂部的實用程式類別輕鬆變更間距、顏色、佈局和互動。

可自訂的組件

每個 Frutjam 元件都設計為接受 Tailwind 實用程序，因此您無需編寫自訂 CSS 即可調整樣式。

實用優先控制

使用 text-lg、px-6 和 bg-base-200 等 Tailwind 類別在幾分鐘內自訂元件。

幾秒鐘內即可開始

兩次導入，您就可以開始建置了。沒有建置工具，沒有配置，沒有運行時。

步驟1

透過 npm 安裝

使用單一命令將 Frutjam 新增至您的專案。

bash 
npm install frutjam

步驟2

導入你的CSS

將 Tailwind 和 Frutjam 加入您的樣式表中。

css 
1
2
@import "tailwindcss";
@import "frutjam";

步驟3

使用乾淨的組件

編寫語意類別而不是長效用鏈。

html 
1
2
3
<button class="btn btn-primary">
    Get Started
</button>
完整安裝指南

查看實際效果

真實的組件、真實的程式碼——複製並發布。

按鈕

html 
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>

徽章和標籤

Primary Active Pending Error Default
html 
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>

按鈕尺寸

html 
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>

卡片

Card Title

A clean, accessible card component ready to use in any project.

html 
 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 是一個免費、開源的純 CSS UI 庫，使用 Tailwind CSS v4 構建，專注於可訪問性和更快的開發。它不需要複雜的 JavaScript 配置或龐大的 JS 捆綁包，這使其成為需要 WCAG 相容元件且 JavaScript 開銷為零的團隊的輕量級 DaisyUI 替代方案。

只需將 @import "frutjam" 加入您的樣式表即可開始。 Frutjam 消除了 HTML 中冗長的 Tailwind CSS 類別清單的需要；只需使用乾淨的語義類別即可輕鬆建立元件。使用簡單的 CSS 變數輕鬆自訂主題，所有元件都會立即更新。

W3C web standards icon An icon representing W3C web standards with a document, code brackets, and W3C text.

W3C 標準

適用於現代 Web 應用程式的乾淨、有效的 HTML。

Accessibility icon A stylized human figure with arms outstretched inside a circle, representing accessibility and inclusion.

無障礙第一

每個組件在構建時都考慮到了 a11y。

Color contrast accessibility icon A symbol showing a split circle with currentColor and white halves and a color dropper, representing color contrast and accessibility.

色彩對比

組件開箱即透過 WCAG AA/AAA 顏色對比檢查。

SEO Crawler Icon An icon showing the letters SEO and a small scanning robot inside a browser window.

搜尋引擎優化友好

語意標記可提高搜尋引擎的可見度。

Web developer icon A rounded code editor window with colored control buttons and several lines of code, representing a developer-friendly interface.

開發者友善

簡單、直覺的 API 且易於整合。

CSS code icon A developer window split into HTML and CSS sides with toolbar and code symbols.

CSS 和 HTML 優先

沒有 JavaScript 鎖定——風格和結構是第一位的。

Tailwind CSS Icon Tailwind CSS wave icon centered inside a currentColor circular border.

Tailwind CSS 支持

與您現有的 Tailwind 工作流程完美配合。

RTL support icon A right-to-left text icon showing right-aligned text lines and a slightly lower left-pointing arrow.

RTL 支持

與從右到左的語言完全相容。

Responsive design icon Minimalist icon showing a desktop monitor, tablet, and phone to represent responsive web design.

反應靈敏

在任何裝置、任何螢幕尺寸上看起來都很棒。

Actively Developing Software An icon showing a code window with code brackets and a sparkle star inside, representing new features in active development.

積極維護

新組件、更新和社區支援。

Palette icon An icon showing a painter's palette with multiple paint spots.

專業主題

在明暗模式之間切換，或建立自己的模式。

Prebuilt Layouts & Components An icon showing nested rectangles and blocks to represent modular UI layouts and reusable components.

預建佈局和元件

適用於任何專案的即用型構建塊。

Open Source An icon showing an open padlock with a code symbol to represent open source software.

開源

麻省理工學院許可並由社區驅動。

Plug icon Icon representing the plugin being connected to the socket

插件支援

使用 Markdown 文字編輯器等有用的插件來擴展 Frutjam。

Arrow down wide narrow

減小 DOM 大小

大量嵌套或不必要的元素可能會導致渲染速度減慢。簡化組件結構並提高效能和可維護性。

Google PageSpeed Insights 為 100/100

使用 Frutjam UI 庫在效能、可訪問性、最佳實踐和 SEO 方面獲得滿分 100 分。該網站完全使用 Frutjam UI 構建，在 Google PageSpeed Insights 上獲得了 100/100 的總分。

網站運行速度更快，提供更好的用戶體驗，並且具有更高的搜尋排名。在當今人工智慧驅動的網路中，速度更快的網站是優先考慮的——人工智慧工具經常即時掃描網站，它們更喜歡快速、高效、不浪費運算資源的頁面。使用面向未來的 UI 庫建立更智慧的產品。

表現
無障礙
最佳實踐
搜尋引擎優化
PageSpeed 上的 frutjam.com

純 CSS，無需 JavaScript。與框架無關並且在任何地方都完全相容。

Frutjam UI 函式庫不需要大量的 JavaScript 包，因為它是用純 CSS 寫的。這使您的專案變得輕量級並針對更快的載入時間和更流暢的效能進行了最佳化。它可以與任何 Web 框架或後端完美配合，無論您使用的是 React、Vue、Angular、Next.js、Django、HTMX、Laravel 還是只是純 HTML。

如何使用

對於現代框架

你的框架很快。保持這種狀態。

Next.js、Svelte 和 Vue 專為出色的效能和 SEO 而設計——伺服器渲染、最少的 JS、即時水合作用。但是當你為像模態這樣簡單的東西添加一個充滿臃腫 JavaScript 的重型元件庫時，你就放棄了這些框架所承諾的一切。

Frutjam 在設計上是 CSS 優先和原生優先的。沒有 JavaScript 捆綁包。沒有運轉時開銷。沒有佈局變化。您的框架的性能上限將成為您的實際性能——而不僅僅是理論上的性能。

零佈局偏移

純 CSS 元件會立即隨頁面呈現－無需 JavaScript 來繪製 UI。您的累積佈局偏移 (CLS) 保持為 0，保持完美的 PageSpeed 分數。

無 JS 開銷

您的框架因捆绑分割而节省的每一 KB JavaScript，Frutjam 都不会再添加回来。按钮、卡片、模式、徽章——全部采用 CSS。您的互動時間保持很快。

SEO 交付

開箱即用的語意 HTML、W3C 有效標記和 WCAG 顏色對比。搜尋引擎讀取乾淨的結構。將現代框架與 Frutjam 配對，您的頁面可以排名和運行。

0ms
UI 的 JS 執行
0
佈局轉換 (CLS)
W3C
有效標記
AA+
WCAG對比
😎

不再有醜陋的 HTML，類別名稱更少，易於維護，開發速度更快。

不再有凌亂的類別：一個類別即可完成所有操作。不必一次又一次地為每個元素、每個頁面和每個項目編寫混亂的類，而是使用 Frutjam 組件類名，以便於維護和擴展以及更快的開發，而無需為混亂的類而煩惱。

html 
 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>
結果：
html 
<button type="button" class="btn">Button</button>

主題和定制

Frutjam 使用簡單的 CSS 變數進行主題化。更改一個變量，每個組件都會立即更新 - 無需重建，無需更改類別。

css 
 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 一次縮放所有元件 - 更改一個變量，每個元素都會更新。

版式

字體系列、尺寸比例和行高 - 設定您的類型系統一次，所有組件都會繼承它。

間距和尺寸

組件填充和大小變體 - 使用內建大小修飾符或全域覆蓋間距標記。

元件庫

針對每個用例的預先建置、可存取元件的集合不斷增加。

查看所有組件

按鈕和表格

按鈕變體、輸入、複選框、選擇和完整表單佈局。

模態框和對話框

可存取的模式對話框、抽屜和確認提示。

導航

導覽列、側邊欄、麵包屑和選項卡導覽。

卡片和佈局

卡片變體、網格系統和頁面佈局框架。

警報和祝酒詞

狀態警報、通知橫幅和內聯回饋訊息。

徽章和標籤

狀態徽章、類別標籤和標籤元件。

列表和表格

資料表、有序/無序列表和定義清單。

外掛

Markdown 編輯器、語法螢光筆和更多有用的擴充。

社群插件

深受後端開發人員的喜愛。原生優先的 Markdown 編輯器。

大多數編輯器都打破了標準的網路工作流程。 MarkdownEditor 擁抱它 - 直接位於

直接替換－一類，一行 JS。後端不變。

原生表單集成

增強了標準