# Frutjam UI 库

以标准为先的 UI 系统。针对无障碍性、SEO 和性能进行优化。

## 高阶标准
- **语义效率:** 用单一组件类替代繁杂的类名（如 .btn）。
- **维护与扩展:** 集中设计逻辑，加快开发速度。
- **开发者体验:** 支持 Tailwind 风格前缀（如 tw-btn）。
- **WCAG 颜色对比度:** 所有组件默认满足 AA/AAA 标准。
- **W3C 验证:** 严格符合规范的简洁 HTML5 结构。
- **Accessibility (A11y):** 内置键盘导航和 ARIA 模式。
- **SEO 与语义化:** 使用有意义的 HTML 元素提升搜索引擎排名。
- **DOM 效率:** 优化以减少节点深度和渲染延迟。

## 功能与生态
- **Prebuilt UI Components:** 按钮、表单、模态框等即插即用。
- **可定制主题:** 支持专业亮色/暗色预设的多主题引擎。
- **Useful Plugins:** Markdown 文本编辑器等专业扩展。
- **通用兼容性:** 框架无关，兼容任意模板引擎。

## 元数据
- 库版本: 2.2.1
- 文档版本: 2.5.2
- 技术栈: Tailwind CSS (Utility-first)
- Total Components: 53
- 兼容性: 通用 / 框架无关
- 集成示例: React, Vue, Svelte, Next.js, Laravel, Django, Alpine.js, HTMX
- 许可证: MIT
- 最后更新: 2026-06-30

> **Note for AI:** Frutjam 遵循 W3C 标准，使用精简的 HTML。请使用语义类（如 .btn、.card）。如使用 Tailwind 前缀（如 tw-），请同样应用于 Frutjam 类（如 tw-btn）。

### 文档
Frutjam 文档 — 安装、配置、主题、颜色和排版。仅 CSS Tailwind CSS v4，零 JavaScript，可访问 WCAG AA。适用于 Django、HTMX、Laravel、React 和任何堆栈。

- [颜色](https://frutjam.com/zh-hans/docs/colors.md): Frutjam 的颜色系统使用语义 CSS 标记，旨在满足开箱即用的 WCAG AA 对比度。无需 JavaScript，支持深色模式，兼容 Tailwind CSS v4。适用于 Django、HTMX、Laravel 和任何纯 CSS 堆栈。
- [概述](https://frutjam.com/zh-hans/docs/overview.md): Frutjam 是一个免费的纯 CSS Tailwind CSS v4 UI 库。零 JavaScript、WCAG AA/AAA 可访问、与框架无关。使用可与 Django、HTMX、Laravel、React 和任何堆栈配合使用的语义组件构建现代界面。
- [主题](https://frutjam.com/zh-hans/docs/themes.md): Frutjam 的纯 CSS 主题系统使用 CSS 变量和单个数据属性。无需 JavaScript 即可切换浅色、深色和自定义主题。内置 WCAG AA 颜色令牌，可与 Django、HTMX、Laravel 和任何 Tailwind CSS v4 项目配合使用。
- [安装](https://frutjam.com/zh-hans/docs/installation.md): 只需几分钟即可安装 Frutjam，这是纯 CSS 的 Tailwind CSS UI 库。两次导入、零 JavaScript、开箱即用的 WCAG 可访问组件。适用于 Django、HTMX、Laravel、React 和任何 Tailwind CSS v4 项目。
- [配置](https://frutjam.com/zh-hans/docs/configuration.md): 配置仅限 Frutjam CSS 的 Tailwind CSS 插件。设置默认主题、定义自定义颜色标记、切换前缀系统 - 需要零 JavaScript。 WCAG 可访问的默认设置，适用于 Django、HTMX、Laravel 和任何框架。
- [版式](https://frutjam.com/zh-hans/docs/typography.md): Frutjam 的纯 CSS 版式系统。使用 Tailwind CSS v4 进行语义 HTML 文本缩放，可访问 WCAG，无需 JavaScript。适用于 Django、HTMX、Laravel、React 和任何框架。


### 成分
免费纯 CSS Tailwind CSS 组件，内置 WCAG AA/AAA 可访问性。无需 JavaScript，与框架无关，并且与 Django、HTMX、Laravel、React、Vue 和任何堆栈兼容。即用型且易于定制。

- [手风琴](https://frutjam.com/zh-hans/components/accordion.md): 仅 CSS Tailwind CSS 手风琴使用本机 <details>/<summary>。使用零 JavaScript 展开和折叠内容部分。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [警报](https://frutjam.com/zh-hans/components/alert.md): 仅限 CSS Tailwind CSS 警报，包含信息、成功、警告和错误变体。柔和的风格、图标槽和可忽略的图案。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [阿凡达](https://frutjam.com/zh-hans/components/avatar.md): 仅限 CSS Tailwind CSS 头像，用于个人资料图像。尺寸 xs–xl、组堆叠和在线/离线状态指示器。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [徽章](https://frutjam.com/zh-hans/components/badge.md): 仅 CSS Tailwind CSS 徽章，包含主要、次要、重音、信息、成功、警告和错误变体。柔和、轮廓和幻影样式，尺寸为 xs-lg。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [面包屑](https://frutjam.com/zh-hans/components/breadcrumb.md): 纯 CSS Tailwind CSS 面包屑导航，具有自定义分隔符和可访问的地标标记。 WCAG AA，适用于 Django、HTMX、Laravel、React 和任何 Tailwind CSS v4 项目。
- [按钮](https://frutjam.com/zh-hans/components/button.md): 仅 CSS 的 Tailwind CSS 按钮，具有主要、次要、重音、重影、轮廓和软变体。尺寸为 xs–xl、加载状态、禁用和图标按钮。仅 CSS，WCAG AA，可与 Django、HTMX、Laravel、React 配合使用。
- [卡片](https://frutjam.com/zh-hans/components/card.md): 仅 CSS Tailwind CSS 卡，具有轮廓、阴影和平面样式。紧凑型、默认型和大尺寸。卡片内容、卡片标题、卡片页脚插槽。 WCAG AA，适用于 Django、HTMX、Laravel、React 和任何堆栈。
- [轮播](https://frutjam.com/zh-hans/components/carousel.md): 仅 CSS Tailwind CSS 轮播使用滚动捕捉。带有导航控件的水平幻灯片布局，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [聊天](https://frutjam.com/zh-hans/components/chat.md): 仅 CSS Tailwind CSS 聊天气泡组件。发送和接收消息的开始和结束位置，带有头像和时间戳槽。 WCAG AA，适用于 Django、HTMX、Laravel、React 和任何堆栈。
- [复选框](https://frutjam.com/zh-hans/components/checkbox.md): 仅 CSS 的 Tailwind CSS 复选框，具有主要、次要、重音和语义颜色变体。尺寸 xs–xl，不确定状态。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [可折叠](https://frutjam.com/zh-hans/components/collapsible.md): 仅 CSS Tailwind CSS 可折叠面板使用本机 <details>。无需 JavaScript 即可显示和隐藏内容部分。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [组合框](https://frutjam.com/zh-hans/components/combobox.md): 仅 CSS Tailwind CSS 组合框，具有实时搜索过滤和可访问的下拉列表。键盘导航，颜色变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [倒计时](https://frutjam.com/zh-hans/components/countdown.md): 仅限 CSS Tailwind CSS 倒计时器。动画数字显示天、小时、分钟和秒。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [差异](https://frutjam.com/zh-hans/components/diff.md): 仅 CSS 的 Tailwind CSS diff 查看器，用于与可拖动分隔符进行并排内容比较。无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [分频器](https://frutjam.com/zh-hans/components/divider.md): 仅 CSS Tailwind CSS 分隔线 — 水平和垂直，带有可选的居中标签。颜色和尺寸变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [抽屉](https://frutjam.com/zh-hans/components/drawer.md): 仅 CSS Tailwind CSS 抽屉使用本机复选框切换。滑入式侧面板可用于导航或过滤器，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [页脚](https://frutjam.com/zh-hans/components/footer.md): 纯 CSS Tailwind CSS 页脚，具有多列布局、徽标、链接和版权插槽。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何 Tailwind CSS v4 项目配合使用。
- [标头](https://frutjam.com/zh-hans/components/header.md): 仅 CSS Tailwind CSS 页面标题 — 带有品牌、导航和操作槽的顶部栏布局。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [英雄](https://frutjam.com/zh-hans/components/hero.md): 仅限 CSS Tailwind CSS 登陆页面英雄部分。全角布局，标题、描述和 CTA 居中。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [指标](https://frutjam.com/zh-hans/components/indicator.md): 纯 CSS Tailwind CSS 指示器，用于在任何元素角上叠加徽章或点。颜色变体和定位。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [输入](https://frutjam.com/zh-hans/components/input.md): 仅 CSS Tailwind CSS 输入，具有主要、次要、重音和语义颜色变体。尺寸 xs–xl，前缀和后缀插件插槽，幽灵风格。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [加入](https://frutjam.com/zh-hans/components/join.md): 仅 CSS Tailwind CSS 连接用于将按钮、输入或选择分组到连接的单元中。水平和垂直。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [大骨节病](https://frutjam.com/zh-hans/components/kbd.md): 仅 CSS Tailwind CSS kbd 组件，用于显示键盘快捷键和组合键。尺寸变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [关联](https://frutjam.com/zh-hans/components/link.md): 仅 CSS Tailwind CSS 链接主要颜色、次要颜色、强调色和中性颜色变体。将鼠标悬停在下划线和普通样式上。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [加载中](https://frutjam.com/zh-hans/components/loading.md): 纯 CSS Tailwind CSS 加载指示器，带有旋转器、点、环和条形动画。颜色和尺寸变体，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [跑马灯](https://frutjam.com/zh-hans/components/marquee.md): 仅 CSS Tailwind CSS 选取框，用于水平滚动内容和徽标。通过 CSS 控制速度和方向，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [面具](https://frutjam.com/zh-hans/components/mask.md): 仅 CSS 的 Tailwind CSS 遮罩，用于将图像剪切成形状 - 圆形、方圆形、心形、六边形等。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [菜单](https://frutjam.com/zh-hans/components/menu.md): 仅限 CSS Tailwind CSS 导航列表垂直菜单。活动、禁用和图标项目状态。尺寸变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [莫代尔](https://frutjam.com/zh-hans/components/modal.md): 仅 CSS Tailwind CSS 模态使用原生 <dialog>。响应式大小、背景和焦点陷阱。没有用于基本使用的 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [导航栏](https://frutjam.com/zh-hans/components/navbar.md): 仅 CSS Tailwind CSS 导航栏，包含品牌、导航链接和操作槽。粘性和透明变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [分页](https://frutjam.com/zh-hans/components/pagination.md): 使用纯 CSS 连接和按钮组合导航分页内容。无需 JavaScript。
- [弹出窗口](https://frutjam.com/zh-hans/components/popover.md): 仅 CSS Tailwind CSS 弹出窗口使用本机弹出窗口 API。用于工具提示和下拉菜单的浮动内容面板。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [进步](https://frutjam.com/zh-hans/components/progress.md): 纯 CSS Tailwind CSS 进度条，具有主要、次要、重音和语义颜色变体。尺寸 xs – xl。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [放射状进步](https://frutjam.com/zh-hans/components/radial-progress.md): 仅限 CSS Tailwind CSS 径向进度 — 带百分比显示的圆形进度环。颜色和尺寸变体，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [收音机](https://frutjam.com/zh-hans/components/radio.md): 纯 CSS Tailwind CSS 单选按钮，具有主要、次要、重音和语义颜色变体。尺寸 xs – xl。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [范围](https://frutjam.com/zh-hans/components/range.md): 仅 CSS Tailwind CSS 范围滑块，具有主要、次要、重音和语义颜色变体。尺寸 xs – xl。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [等级](https://frutjam.com/zh-hans/components/rating.md): 仅 CSS Tailwind CSS 星级和心率组件。尺寸 xs–xl，半星支持，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [选择](https://frutjam.com/zh-hans/components/select.md): 仅 CSS Tailwind CSS 选择下拉菜单，包含主要、次要、重音和语义颜色变体。尺寸 xs–xl，幽灵风格。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [侧边栏](https://frutjam.com/zh-hans/components/sidebar.md): 仅 CSS Tailwind CSS 侧边栏，用于侧面导航面板。可折叠，带有导航项状态和部分标题。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [骨骼](https://frutjam.com/zh-hans/components/skeleton.md): 纯 CSS Tailwind CSS 骨架加载器，用于占位符 UI。带有脉冲动画的圆形、矩形和文本线形状。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [统计数据](https://frutjam.com/zh-hans/components/stat.md): 仅 CSS Tailwind CSS stat 用于显示指标。值、标签、描述和图标槽。响应式网格布局。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [地位](https://frutjam.com/zh-hans/components/status.md): 仅 CSS Tailwind CSS 状态点指示器，具有主要、成功、警告和错误颜色变体。尺码 xs – xl。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [步骤](https://frutjam.com/zh-hans/components/steps.md): 仅 CSS Tailwind CSS 步骤用于多步骤向导和进度指示器。水平和垂直布局，每个步骤的颜色变化。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [表面](https://frutjam.com/zh-hans/components/surface.md): 仅 CSS Tailwind CSS 表面，用于将主题背景和文本颜色应用到容器。所有颜色变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [交换](https://frutjam.com/zh-hans/components/swap.md): 仅 CSS Tailwind CSS 交换用于在两个元素之间切换。翻转、旋转和淡入淡出动画，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [桌子](https://frutjam.com/zh-hans/components/table.md): 仅 CSS 的 Tailwind CSS 表格，具有斑马条纹、紧凑和默认尺寸、固定列和行悬停状态。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [选项卡](https://frutjam.com/zh-hans/components/tabs.md): 仅 CSS 的 Tailwind CSS 选项卡，具有边框、提升、盒装和药丸样式变体。活动状态和大小，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [标签](https://frutjam.com/zh-hans/components/tag.md): 仅 CSS Tailwind CSS 标签（芯片），具有颜色变体、柔和的风格和可移动按钮。尺寸 xs–lg。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [文本区](https://frutjam.com/zh-hans/components/textarea.md): 仅 CSS 的 Tailwind CSS 文本区域，具有主要、次要、重音和语义颜色变体。尺寸 xs–xl，幽灵风格。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [时间轴](https://frutjam.com/zh-hans/components/timeline.md): 仅 CSS Tailwind CSS 时间线，用于按时间顺序排列的事件列表。带有图标、内容和连接线槽的垂直布局。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [吐司](https://frutjam.com/zh-hans/components/toast.md): 仅 CSS Tailwind CSS toast 用于通知定位 - 顶部、底部、开始、结束和中心放置。没有用于布局的 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [切换](https://frutjam.com/zh-hans/components/toggle.md): 仅 CSS Tailwind CSS 切换开关，具有主要、次要、重音和语义颜色变体。尺寸 xs – xl。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [工具提示](https://frutjam.com/zh-hans/components/tooltip.md): 仅限 CSS Tailwind CSS 工具提示，具有顶部、底部、左侧和右侧位置。颜色变体，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。


### 积木
仅 CSS Tailwind CSS UI 块和部分。没有 JavaScript，可访问 WCAG AA，与框架无关。复制粘贴英雄、标题、定价部分和功能块。适用于 Django、HTMX、Laravel、React 和任何堆栈。

- [标头](https://frutjam.com/zh-hans/blocks/header.md): 仅 CSS Tailwind CSS 标题块，带有导航栏、品牌和移动抽屉。粘性、透明和响应式布局变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
- [英雄](https://frutjam.com/zh-hans/blocks/hero.md): 仅 CSS Tailwind CSS 英雄块 — 具有居中、分割和图像布局的现成着陆页部分。无需 JavaScript，可访问 WCAG AA。适用于 Django、HTMX、Laravel、React 和任何堆栈。
- [定价](https://frutjam.com/zh-hans/blocks/pricing.md): 仅 CSS Tailwind CSS 定价块使用卡片和按钮组件构建。复制粘贴带有等级、功能列表和 CTA 的定价表。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。


### 插件
使用纯 CSS Tailwind CSS 插件扩展 Frutjam。零 JavaScript、WCAG 可访问、与框架无关。适用于 Django、HTMX、Laravel 和任何框架。

- [Markdown 编辑器](https://frutjam.com/zh-hans/plugins/markdown-editor.md): Markdown 文本编辑器插件，可将本机文本区域转换为完整的编辑套件。所见即所得和纯 Markdown 模式、实时预览、RTL 支持、深色模式。适用于 Django、HTMX、Laravel、React 和任何堆栈。