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

Installation

Install Frutjam, the CSS-only Tailwind CSS UI library, in minutes. Two imports, zero JavaScript, WCAG accessible components out of the box. Works with Django, HTMX, Laravel, React, and any Tailwind CSS v4 project.

如何在 Tailwind CSS 專案中安裝 Frutjam UI 庫？

請確保您的電腦上安裝了可用的 Tailwind CSS 項目，以及 Node 和 NPMload">Node 和 NPMload">Node 和 NPMload">Node 和 NPM。 Frutjam 可與 Tailwind 版本 4 搭配使用。

透過執行以下命令將 frutjam 安裝為節點包：

bash 
npm i -D frutjam

使用 @plugin 指令將 Frutjam 加入您的 input.css 中：

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

JavaScript 和React——可選，非必需

Frutjam 是原生優先和 CSS 優先。絕大多數元件（按鈕、徽章、卡片、表單、警報等）都可使用純 HTML 和 CSS，無需任何 JavaScript。

、
和 等原生 HTML 元素可處理瀏覽器已支援的互動性。所有元件均可透過 WCAG AA 開箱即用，並可與 Django、HTMX、Laravel、React、Next.js 和任何堆疊配合使用。

少數元件沒有本機 HTML 等效項（toast 通知、組合方塊過濾、輪播控制）。僅針對這些情況，Frutjam 提供了輕量級可選助手。

Vanilla JS — frutjam/js

與框架無關的 ES 模組助手，用於需要它們的組件。附加到任何 DOM 元素 — 無需框架。

js 
1
2
3
4
5
6
import { createModal } from 'frutjam/js'

const modal = createModal(document.getElementById('myModal'))
modal.open()   // calls showModal()
modal.close()  // calls close()
modal.toggle()

React Hooks — frutjam/eact

圍繞相同的本機 DOM 調用的精簡 React 包裝器。每個鉤子都會傳回一個附加到元素的 ref 和控制它的方法 - 除了 React 本身之外沒有額外的依賴項。

js 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import { useModal } from 'frutjam/react'

export default function App() {
  const modal = useModal()
  return (
    <>
      <button onClick={modal.open}>Open</button>
      <dialog ref={modal.ref} className="modal">...</dialog>
    </>
  )
}

適用於：useModal、useDrawer、useCollapsible、useTooltip、useTabs、useToast、useCarousel、useCombobox。

使用 CDN

使用 frutjam UI 庫的 CDN 版本可快速輕鬆地集成，無需本地設定。將此 CDN 版本的 frutjam 僅用於開發目的，不得用於生產。

html 
1
2
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@2.2.2/dist/frutjam.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

下一步

安裝後，請嘗試使用按鈕元件來查看 Frutjam 的運作情況，或探索完整的元件庫。

AI編輯器集成

使用 Claude Code、Cursor 或其他 AI 編輯器？

Cherry MCP 將 Frutjam 的完整組件庫直接帶入您的 AI 編輯器上下文中 — 準確的類名稱、實時文檔，無需複製粘貼。

了解 Cherry MCP →

想要了解 Frutjam CSS 優先方法背後的想法嗎？ 了解我們為何以這種方式建構它 →