成分
免费纯 CSS Tailwind CSS 组件，内置 WCAG AA/AAA 可访问性。无需 JavaScript，与框架无关，并且与 Django、HTMX、Laravel、React、Vue 和任何堆栈兼容。即用型且易于定制。
Frutjam ships 52+ CSS-only Tailwind CSS components — buttons, modals, forms, navigation, data display, and more — built for Tailwind CSS v4. Every component uses semantic class names (.btn, .card, .badge) that work alongside any Tailwind utility class. No JavaScript is bundled, no React context required, and no PostCSS plugins needed beyond Tailwind itself. Every component is WCAG AA accessible out of the box, with hand-tuned OKLCH color pairs that guarantee readable contrast on every surface. Because Frutjam is CSS-only and framework-agnostic, the same HTML markup works in Django templates, HTMX responses, Laravel Blade, Rails ERB, React JSX, or plain static HTML — without modification.
New to Frutjam?
Get started in seconds — two imports and you're ready to build.
手风琴
仅 CSS Tailwind CSS 手风琴使用本机 <details>/<summary>。使用零 JavaScript 展开和折叠内容部分。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
警报
仅限 CSS Tailwind CSS 警报，包含信息、成功、警告和错误变体。柔和的风格、图标槽和可忽略的图案。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
阿凡达
仅限 CSS Tailwind CSS 头像，用于个人资料图像。尺寸 xs–xl、组堆叠和在线/离线状态指示器。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
徽章
仅 CSS Tailwind CSS 徽章，包含主要、次要、重音、信息、成功、警告和错误变体。柔和、轮廓和幻影样式，尺寸为 xs-lg。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
面包屑
纯 CSS Tailwind CSS 面包屑导航，具有自定义分隔符和可访问的地标标记。 WCAG AA，适用于 Django、HTMX、Laravel、React 和任何 Tailwind CSS v4 项目。
按钮
仅 CSS 的 Tailwind CSS 按钮，具有主要、次要、重音、重影、轮廓和软变体。尺寸为 xs–xl、加载状态、禁用和图标按钮。仅 CSS，WCAG AA，可与 Django、HTMX、Laravel、React 配合使用。
卡片
仅 CSS Tailwind CSS 卡，具有轮廓、阴影和平面样式。紧凑型、默认型和大尺寸。卡片内容、卡片标题、卡片页脚插槽。 WCAG AA，适用于 Django、HTMX、Laravel、React 和任何堆栈。
轮播
仅 CSS Tailwind CSS 轮播使用滚动捕捉。带有导航控件的水平幻灯片布局，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
聊天
仅 CSS Tailwind CSS 聊天气泡组件。发送和接收消息的开始和结束位置，带有头像和时间戳槽。 WCAG AA，适用于 Django、HTMX、Laravel、React 和任何堆栈。
复选框
仅 CSS 的 Tailwind CSS 复选框，具有主要、次要、重音和语义颜色变体。尺寸 xs–xl，不确定状态。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
可折叠
仅 CSS Tailwind CSS 可折叠面板使用本机 <details>。无需 JavaScript 即可显示和隐藏内容部分。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
组合框
仅 CSS Tailwind CSS 组合框，具有实时搜索过滤和可访问的下拉列表。键盘导航，颜色变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
倒计时
仅限 CSS Tailwind CSS 倒计时器。动画数字显示天、小时、分钟和秒。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
差异
仅 CSS 的 Tailwind CSS diff 查看器，用于与可拖动分隔符进行并排内容比较。无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
分频器
仅 CSS Tailwind CSS 分隔线 — 水平和垂直，带有可选的居中标签。颜色和尺寸变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
抽屉
仅 CSS Tailwind CSS 抽屉使用本机复选框切换。滑入式侧面板可用于导航或过滤器，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
页脚
纯 CSS Tailwind CSS 页脚，具有多列布局、徽标、链接和版权插槽。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何 Tailwind CSS v4 项目配合使用。
标头
仅 CSS Tailwind CSS 页面标题 — 带有品牌、导航和操作槽的顶部栏布局。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
英雄
仅限 CSS Tailwind CSS 登陆页面英雄部分。全角布局，标题、描述和 CTA 居中。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
指标
纯 CSS Tailwind CSS 指示器，用于在任何元素角上叠加徽章或点。颜色变体和定位。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
输入
仅 CSS Tailwind CSS 输入，具有主要、次要、重音和语义颜色变体。尺寸 xs–xl，前缀和后缀插件插槽，幽灵风格。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
加入
仅 CSS Tailwind CSS 连接用于将按钮、输入或选择分组到连接的单元中。水平和垂直。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
大骨节病
仅 CSS Tailwind CSS kbd 组件，用于显示键盘快捷键和组合键。尺寸变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
关联
仅 CSS Tailwind CSS 链接主要颜色、次要颜色、强调色和中性颜色变体。将鼠标悬停在下划线和普通样式上。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
加载中
纯 CSS Tailwind CSS 加载指示器，带有旋转器、点、环和条形动画。颜色和尺寸变体，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
跑马灯
仅 CSS Tailwind CSS 选取框，用于水平滚动内容和徽标。通过 CSS 控制速度和方向，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
面具
仅 CSS 的 Tailwind CSS 遮罩，用于将图像剪切成形状 - 圆形、方圆形、心形、六边形等。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
菜单
仅限 CSS Tailwind CSS 导航列表垂直菜单。活动、禁用和图标项目状态。尺寸变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
莫代尔
仅 CSS Tailwind CSS 模态使用原生 <dialog>。响应式大小、背景和焦点陷阱。没有用于基本使用的 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
导航栏
仅 CSS Tailwind CSS 导航栏，包含品牌、导航链接和操作槽。粘性和透明变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
弹出窗口
仅 CSS Tailwind CSS 弹出窗口使用本机弹出窗口 API。用于工具提示和下拉菜单的浮动内容面板。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
进步
纯 CSS Tailwind CSS 进度条，具有主要、次要、重音和语义颜色变体。尺寸 xs – xl。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
放射状进步
仅限 CSS Tailwind CSS 径向进度 — 带百分比显示的圆形进度环。颜色和尺寸变体，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
收音机
纯 CSS Tailwind CSS 单选按钮，具有主要、次要、重音和语义颜色变体。尺寸 xs – xl。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
范围
仅 CSS Tailwind CSS 范围滑块，具有主要、次要、重音和语义颜色变体。尺寸 xs – xl。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
等级
仅 CSS Tailwind CSS 星级和心率组件。尺寸 xs–xl，半星支持，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
选择
仅 CSS Tailwind CSS 选择下拉菜单，包含主要、次要、重音和语义颜色变体。尺寸 xs–xl，幽灵风格。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
侧边栏
仅 CSS Tailwind CSS 侧边栏，用于侧面导航面板。可折叠，带有导航项状态和部分标题。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
骨骼
纯 CSS Tailwind CSS 骨架加载器，用于占位符 UI。带有脉冲动画的圆形、矩形和文本线形状。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
统计数据
仅 CSS Tailwind CSS stat 用于显示指标。值、标签、描述和图标槽。响应式网格布局。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
地位
仅 CSS Tailwind CSS 状态点指示器，具有主要、成功、警告和错误颜色变体。尺码 xs – xl。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
步骤
仅 CSS Tailwind CSS 步骤用于多步骤向导和进度指示器。水平和垂直布局，每个步骤的颜色变化。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
表面
仅 CSS Tailwind CSS 表面，用于将主题背景和文本颜色应用到容器。所有颜色变体。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
交换
仅 CSS Tailwind CSS 交换用于在两个元素之间切换。翻转、旋转和淡入淡出动画，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
桌子
仅 CSS 的 Tailwind CSS 表格，具有斑马条纹、紧凑和默认尺寸、固定列和行悬停状态。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
选项卡
仅 CSS 的 Tailwind CSS 选项卡，具有边框、提升、盒装和药丸样式变体。活动状态和大小，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
标签
仅 CSS Tailwind CSS 标签（芯片），具有颜色变体、柔和的风格和可移动按钮。尺寸 xs–lg。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
文本区
仅 CSS 的 Tailwind CSS 文本区域，具有主要、次要、重音和语义颜色变体。尺寸 xs–xl，幽灵风格。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
时间轴
仅 CSS Tailwind CSS 时间线，用于按时间顺序排列的事件列表。带有图标、内容和连接线槽的垂直布局。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
吐司
仅 CSS Tailwind CSS toast 用于通知定位 - 顶部、底部、开始、结束和中心放置。没有用于布局的 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
切换
仅 CSS Tailwind CSS 切换开关，具有主要、次要、重音和语义颜色变体。尺寸 xs – xl。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
工具提示
仅限 CSS Tailwind CSS 工具提示，具有顶部、底部、左侧和右侧位置。颜色变体，无需 JavaScript。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
Frequently asked questions
Are all Frutjam components CSS-only?
Yes — the vast majority of components are pure CSS with zero JavaScript. Buttons, badges, cards, forms, alerts, modals, drawers, tabs, and more all work with plain HTML and CSS. A small number of components that have no native HTML equivalent (toast positioning, combobox filtering, carousel controls) offer optional lightweight JS helpers, but the CSS layout and styling requires no JavaScript at all.
Do Frutjam components work with Django, HTMX, and Laravel?
Yes — Frutjam is framework-agnostic. Because every component is CSS-only, it works with any server-rendered stack. Django templates, HTMX, Laravel Blade, Rails ERB, plain HTML — if you can output HTML, Frutjam works. No React, no build pipeline, no JavaScript framework required.
Are the components WCAG accessible?
Yes — WCAG AA contrast is guaranteed on every component. Every color pair (--color-primary / --color-on-primary, etc.) is hand-tuned in OKLCH to meet WCAG AA contrast requirements. Semantic HTML elements are used throughout — native <dialog> for modals, <details> for accordions, and proper ARIA attributes where needed.
How do Frutjam components compare to DaisyUI?
Both are CSS-only Tailwind CSS component libraries, but Frutjam is built specifically for Tailwind CSS v4, uses OKLCH color tokens with guaranteed WCAG AA contrast pairs, and ships a free MCP server (Cherry) for AI editor integration — DaisyUI's equivalent (Blueprint) is paid. Frutjam also provides explicit on-{color} token pairs rather than computing foreground colors at runtime.
Do I need to install anything besides Tailwind CSS?
Just one extra line. Add @plugin "frutjam"; to your CSS file after @import "tailwindcss"; and install via npm i -D frutjam. That's it — no PostCSS plugins, no JavaScript config, no separate stylesheet to import. All components are available immediately and treeshaken automatically by Tailwind.
Can I use Frutjam components with React or Next.js?
Yes. Since Frutjam is CSS-only, you use components the same way in any stack — just apply the class names. For the few components that benefit from JavaScript control (modal open/close, toast, carousel), Frutjam ships optional React hooks (frutjam/react) that wrap native DOM calls with no extra dependencies.