开源 · MIT 许可 · 永久免费
用于 快速开发的可访问、仅 CSS 的 Tailwind CSS 组件库
Frutjam 是一个超高速开源 UI 库，专为注重无障碍性、Web 标准以及 Tailwind CSS 无缝集成的开发者而生。
符合 W3C 标准、SEO 友好、简单易用。
高度可定制
由 Tailwind CSS 工具类驱动
Frutjam 开箱即提供简洁的组件类，同时保留所有 Tailwind 工具类供您自定义。只需在 Frutjam 组件上叠加工具类，即可轻松调整间距、颜色、布局和交互效果。
可定制的组件
每个 Frutjam 组件都设计为接受 Tailwind 实用程序，因此您无需编写自定义 CSS 即可调整样式。
实用优先控制
使用 text-lg、px-6 和 bg-base-200 等 Tailwind 类在几分钟内定制组件。
几秒钟内上手
两行导入即可开始构建。无需构建工具、无需配置、无需运行时。
步骤1
通过 npm 安装
使用单个命令将 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 是一个免费、开源的纯 CSS UI 库，使用 Tailwind CSS v4 构建，专注于可访问性和更快的开发。它不需要复杂的 JavaScript 配置或庞大的 JS 捆绑包，这使其成为需要 WCAG 兼容组件且 JavaScript 开销为零的团队的轻量级 DaisyUI 替代方案。
只需将 @import "frutjam" 添加到您的样式表中即可开始。 Frutjam 消除了 HTML 中冗长的 Tailwind CSS 类列表的需要；只需使用干净的语义类即可轻松构建组件。使用简单的 CSS 变量轻松自定义主题，所有组件都会立即更新。
W3C 标准
适用于现代 Web 应用程序的干净、有效的 HTML。
无障碍第一
每个组件在构建时都考虑到了 a11y。
色彩对比
组件开箱即通过 WCAG AA/AAA 颜色对比度检查。
搜索引擎优化友好
语义标记可提高搜索引擎的可见性。
开发者友好
简单、直观的 API 且易于集成。
CSS 和 HTML 优先
没有 JavaScript 锁定——风格和结构是第一位的。
Tailwind CSS 支持
与您现有的 Tailwind 工作流程完美配合。
RTL 支持
与从右到左的语言完全兼容。
反应灵敏
在任何设备、任何屏幕尺寸上看起来都很棒。
积极维护
新组件、更新和社区支持。
专业主题
在明暗模式之间切换，或创建您自己的模式。
预建布局和组件
适用于任何项目的即用型构建块。
开源
麻省理工学院许可并由社区驱动。
插件支持
使用 Markdown 文本编辑器等有用的插件扩展 Frutjam。
减小 DOM 大小
大量嵌套或不必要的元素可能会导致渲染速度减慢。简化组件结构并提高性能和可维护性。
Google PageSpeed Insights 为 100/100
使用 Frutjam UI 库在性能、可访问性、最佳实践和 SEO 方面获得满分 100 分。该网站完全使用 Frutjam UI 构建，在 Google PageSpeed Insights 上获得了 100/100 的总分。
网站运行速度更快，提供更好的用户体验，并且具有更高的搜索排名。在当今人工智能驱动的网络中，速度更快的网站是优先考虑的——人工智能工具经常实时扫描网站，它们更喜欢快速、高效、不浪费计算资源的页面。使用面向未来的 UI 库构建更智能的产品。
纯 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 配对，您的页面可以排名和运行。
不再有丑陋的 HTML，类名更少，易于维护，开发速度更快。
不再有凌乱的类：一个类即可完成所有操作。不必一次又一次地为每个元素、每个页面和每个项目编写混乱的类，而是使用 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 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 拥抱它 - 直接位于 <textarea> 之上，因此您的后端永远不会知道任何更改。它仅适用于 form method="POST"、标准 DOM 访问以及每个开箱即用的服务器框架。
用一行 JS 替换普通的 <textarea> ，您的用户将获得 10 倍更好的体验，而您的 Django、Laravel 或 PHP 控制器仍保持原样。
-
无需数据绑定 - 开箱即用，可与
form method="POST"配合使用 -
标准访问 - 像任何输入一样使用
element.value进行读写 - 与后端无关 - PHP、Django、Node.js、Laravel、Rails - 全部只读取纯字符串
- ~116 KB — 混合所见即所得 + 普通模式、RTL、图像上传、实时预览、零 CSS 冲突
现场演示 - 尝试一下：
直接替换——一类，一行 JS。后端不变。
原生表单集成
增强了标准 <textarea>。使用普通 <form> 提交并通过 request.POST['name'] 访问内容。没有 preventDefault()，没有 FormData 构造。
高级图像上传
通过 API 配置服务器上传。图像直接进入您的 CDN — 数据库中没有 Base64 膨胀，没有 SEO 损失，没有占用大量内存的有效负载。
高性能
去抖预览更新、缓存样式计算和无冲突键盘处理。处理数千行，没有输入延迟 - 所有编辑器样式都具有完整的作用域，因此它可以安全地与任何 CSS 框架一起运行。
Frutjam 相比如何？
了解 Frutjam 如何与普通的 Tailwind CSS、Bootstrap 和 DaisyUI 作为免费且易于访问的替代方案进行比较。
| 特征 | Frutjam | 黛西用户界面 | 普通顺风 | 引导程序 |
|---|---|---|---|---|
| 仅 CSS（无需 JavaScript） | ✓ | ✓ | ✓ | 部分的 |
| 语义成分类 | ✓ | ✓ | ✗ | ✓ |
| 每个组件均保证 WCAG AA 对比度 | ✓ | 手动的 | 手动的 | 部分的 |
| 与 Tailwind 公用事业一起工作 | ✓ | ✓ | ✓ | ✗ |
| CSS 变量主题 | ✓ | ✓ | ✓ | 有限的 |
| 可实现 100/100 PageSpeed | ✓ | ✓ | 各不相同 | 各不相同 |
| RTL 支持 | ✓ | 部分的 | 部分的 | ✓ |
| 与框架无关（Django、HTMX、Laravel） | ✓ | ✓ | ✓ | ✓ |
| 通过纯 CSS 变量的主题，无配置文件 | ✓ | 部分的 | 手动的 | ✗ |
| AI编辑器集成（MCP/上下文） | ✓ 免费 | 有薪酬的 | ✗ | ✗ |
AI编辑器集成
使用 Claude Code、Cursor 或 Copilot？
Cherry MCP 将 Frutjam 直接连接到您的 AI 编辑器。获取准确的组件代码、正确的类名和最新的文档 - 无需从浏览器复制粘贴。
尝试Cherry MCP常见问题
关于 Frutjam 您需要了解的一切。
Frutjam 可以免费使用吗？
是的 - Frutjam 已获得 MIT 许可并且完全免费。在个人项目、客户工作和商业产品中使用它，没有任何限制，无需归属。
Frutjam 适合商业项目吗？
是的。 Frutjam 是根据 MIT 许可证开源的，允许在个人和商业产品中免费使用，无需任何版税或限制。
Frutjam 会取代 Tailwind CSS 吗？
不——Frutjam 建立在 Tailwind 之上。将其视为添加语义组件类（.btn、.card、.badge）的层，同时保持所有 Tailwind 实用程序类可用。
我需要 JavaScript 才能使用 Frutjam 吗？
无需 JavaScript。 Frutjam 是纯 CSS - 按钮、卡片、徽章和表单等组件完全无需 JS 运行时即可工作。对于模态框或下拉菜单等交互模式，它可以与 Alpine.js 或 HTMX 等轻量级库完美搭配。
我可以将 Frutjam 与 React、Vue 或 Angular 一起使用吗？
是的——Frutjam 完全与框架无关。它适用于任何模板系统或 JS 框架，包括 React、Vue、Angular、Svelte、Next.js、Nuxt、Laravel、Django 和纯 HTML。只需导入 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 和 CSS 优先 UI 方法的想法。
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 是开源且由社区驱动的。社区中的每个组件、修复和想法都让每个人都受益匪浅。
发现错误？有功能请求吗？想要贡献一个组件或改进文档吗？我们很乐意邀请您。