frutjam
Version:
CSS-only Tailwind CSS v4 component library. 65+ accessible UI components, zero JavaScript, WCAG AA guaranteed. Free MCP server for AI editors included.
331 lines (249 loc) • 11.8 kB
Markdown
[![npm installs][npm_installs]](https://www.npmjs.com/package/frutjam)
[![Jsdelivr hits][jsdelivr]](https://cdn.jsdelivr.net/npm/frutjam)
[](https://github.com/nezanuha/frutjam/releases)
[](https://github.com/nezanuha/frutjam/blob/master/LICENSE)
[](https://snyk.io/test/github/nezanuha/frutjam)
---
# Frutjam — CSS-Only Tailwind CSS UI Component Library
**Frutjam** is a free, open-source Tailwind CSS v4 component library. 65+ production-ready UI components with **zero JavaScript**, guaranteed **WCAG AA accessibility**, and a free **MCP server for AI editors** (Cherry). Works with any framework: React, Vue, HTMX, Django, Laravel, plain HTML.
🌐 **[frutjam.com](https://frutjam.com)** · 📦 **[npm](https://www.npmjs.com/package/frutjam)** · 🍒 **[Cherry MCP](https://frutjam.com/products/cherry)**
---
## What is Frutjam?
Frutjam is a **CSS-only Tailwind CSS component library** built for Tailwind CSS v4. You install it as a Tailwind plugin — one line in your CSS — and instantly get 65+ accessible, copy-paste UI components: buttons, modals, drawers, tabs, toasts, carousels, tables, forms, and more.
Every component works with pure HTML and CSS. No JavaScript framework required. No build pipeline beyond Tailwind itself. Drop it into any stack and start building.
---
## Quick Install
```bash
npm install -D frutjam
```
```css
@import "tailwindcss";
@plugin "frutjam";
```
**That's it.** All 65+ components are available immediately. No imports, no config, no extra stylesheets.
---
## Why Frutjam?
| | Frutjam | DaisyUI | Shadcn UI | Flowbite |
|---|---|---|---|---|
| Zero JavaScript | ✅ | ✅ | ❌ React required | ⚠️ Some JS |
| Tailwind v4 native | ✅ | ⚠️ v3 + v4 | ⚠️ | ❌ |
| WCAG AA guaranteed | ✅ Every component | ⚠️ | ⚠️ | ⚠️ |
| OKLCH color system | ✅ | ❌ | ❌ | ❌ |
| MCP server for AI editors | ✅ Cherry (free tier) | ✅ Blueprint (paid only) | ❌ | ❌ |
| Framework-agnostic | ✅ | ✅ | ❌ React only | ⚠️ |
| Copy-paste friendly | ✅ | ✅ | ✅ | ✅ |
| MIT license | ✅ | ✅ | ✅ | ✅ |
**The short version:** Frutjam is the only Tailwind v4-native component library with guaranteed WCAG AA accessibility, an OKLCH color system, and a free MCP server for AI-assisted development.
---
## Key Features
- **Zero JavaScript** — every component works with pure CSS and semantic HTML. Native `<dialog>` for modals, `<details>` for accordions, CSS `:has()` for interactive states. No `addEventListener`, no hydration, no runtime.
- **65+ components** — buttons, modals, tabs, drawers, tooltips, carousels, cards, alerts, toasts, tables, forms, and more. All production-ready.
- **WCAG AA by default** — every color pair (`--color-primary` / `--color-on-primary`) is hand-tuned in OKLCH to meet WCAG AA contrast requirements. Semantic HTML throughout.
- **Tailwind v4 native** — built as a Tailwind v4 plugin using `@plugin`. No legacy `tailwind.config.js`. OKLCH design tokens via CSS custom properties.
- **Framework-agnostic** — works with React, Next.js, Vue, Nuxt, Svelte, HTMX, Django, Laravel Blade, Astro, Rails, plain HTML — anything that outputs HTML.
- **Themeable** — swap themes with `data-theme="dark"`. Build custom themes in CSS with OKLCH tokens. Supports light, dark, and system preference automatically.
- **Treeshaken** — only the components you use are included. Tailwind's engine removes unused styles at build time.
- **CDN-ready** — no build step needed. Import directly from jsDelivr.
---
## 🍒 Cherry MCP — AI Editor Integration
Cherry is Frutjam's **free MCP server** that gives AI coding assistants accurate, real-time access to Frutjam component docs.
Without Cherry, AI assistants (Claude Code, Cursor, GitHub Copilot) hallucinate Tailwind CSS class names — inventing classes that don't exist. Cherry solves this by feeding your AI editor the exact Frutjam specs at the moment it needs them.
**Works with:** Claude Code · Cursor · VS Code · Windsurf · Zed · Cline · any MCP-compatible editor
```json
{
"mcpServers": {
"frutjam": {
"command": "npx",
"args": ["-y", "frutjam-cherry"]
}
}
}
```
[**Get Cherry MCP →**](https://frutjam.com/products/cherry)
---
## Components
65+ free, production-ready CSS-only Tailwind CSS components:
### Inputs & Forms
- [Button](https://frutjam.com/components/button)
- [Checkbox](https://frutjam.com/components/checkbox)
- [Radio](https://frutjam.com/components/radio)
- [Toggle](https://frutjam.com/components/toggle)
- [Input](https://frutjam.com/components/input)
- [Textarea](https://frutjam.com/components/textarea)
- [Select](https://frutjam.com/components/select)
- [Range](https://frutjam.com/components/range)
- [Rating](https://frutjam.com/components/rating)
- [Combobox](https://frutjam.com/components/combobox)
### Layout & Navigation
- [Navbar](https://frutjam.com/components/navbar)
- [Sidebar](https://frutjam.com/components/sidebar)
- [Drawer](https://frutjam.com/components/drawer)
- [Menu](https://frutjam.com/components/menu)
- [Breadcrumb](https://frutjam.com/components/breadcrumb)
- [Tabs](https://frutjam.com/components/tabs)
- [Steps](https://frutjam.com/components/steps)
- [Footer](https://frutjam.com/components/footer)
- [Header](https://frutjam.com/components/header)
- [Join](https://frutjam.com/components/join)
- [Pagination](https://frutjam.com/components/pagination)
### Feedback & Overlay
- [Modal](https://frutjam.com/components/modal)
- [Toast](https://frutjam.com/components/toast)
- [Alert](https://frutjam.com/components/alert)
- [Tooltip](https://frutjam.com/components/tooltip)
- [Popover](https://frutjam.com/components/popover)
- [Loading](https://frutjam.com/components/loading)
- [Skeleton](https://frutjam.com/components/skeleton)
- [Progress](https://frutjam.com/components/progress)
- [Radial Progress](https://frutjam.com/components/radial-progress)
### Data Display
- [Card](https://frutjam.com/components/card)
- [Table](https://frutjam.com/components/table)
- [Stat](https://frutjam.com/components/stat)
- [Badge](https://frutjam.com/components/badge)
- [Tag](https://frutjam.com/components/tag)
- [Avatar](https://frutjam.com/components/avatar)
- [Indicator](https://frutjam.com/components/indicator)
- [Diff](https://frutjam.com/components/diff)
- [Timeline](https://frutjam.com/components/timeline)
- [Chat](https://frutjam.com/components/chat)
### Typography & Decoration
- [Hero](https://frutjam.com/components/hero)
- [Divider](https://frutjam.com/components/divider)
- [Kbd](https://frutjam.com/components/kbd)
- [Link](https://frutjam.com/components/link)
- [Mask](https://frutjam.com/components/mask)
- [Swap](https://frutjam.com/components/swap)
- [Countdown](https://frutjam.com/components/countdown)
- [Marquee](https://frutjam.com/components/marquee)
- [Carousel](https://frutjam.com/components/carousel)
- [Accordion](https://frutjam.com/components/accordion)
- [Collapsible](https://frutjam.com/components/collapsible)
- [Surface](https://frutjam.com/components/surface)
[**Browse all components with live previews →**](https://frutjam.com/components)
---
## Usage Examples
```html
<!-- Primary button -->
<button class="btn btn-primary">Get Started</button>
<!-- Outline button with badge -->
<button class="btn btn-outline">
Notifications
<span class="badge badge-primary">3</span>
</button>
<!-- CSS-only modal — no JavaScript -->
<button popovertarget="my-modal" class="btn btn-primary">Open Modal</button>
<dialog id="my-modal" popover class="modal">
<div class="modal-content">
<h3 class="heading-lg">Pure CSS modal</h3>
<p class="para">Zero JavaScript. Native browser popover API.</p>
<button popovertarget="my-modal" class="btn mt-4">Close</button>
</div>
</dialog>
<!-- Alert -->
<div class="alert alert-success">
<p>Your changes have been saved.</p>
</div>
<!-- Card -->
<div class="card">
<div class="card-content">
<h2 class="heading-lg">Card title</h2>
<p class="para">Card content goes here.</p>
</div>
</div>
<!-- Input -->
<div class="flex flex-col gap-2">
<label class="text-sm font-medium">Email</label>
<input type="email" class="input" placeholder="you@example.com">
</div>
<!-- Badge variants -->
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success badge-soft">Success</span>
<span class="badge badge-error badge-outline">Error</span>
```
---
## Accessibility
Frutjam is designed for WCAG AA compliance from the ground up:
- **Color contrast** — every color token pair is hand-tuned in OKLCH to exceed WCAG AA 4.5:1 contrast ratio for text
- **Semantic HTML** — native `<dialog>` for modals, `<details>` for accordions, `<nav>` for navigation, correct heading hierarchy
- **Keyboard navigation** — all interactive components are fully keyboard accessible
- **Screen reader support** — ARIA attributes included where native semantics are insufficient
- **Focus management** — visible focus rings on all interactive elements, respects `prefers-reduced-motion`
---
## Themes
```html
<html data-theme="darkberry">
```
```css
/* Define your own theme */
@layer theme {
[data-theme="ocean"] {
--color-primary: oklch(60% 0.2 220);
--color-on-primary: oklch(98% 0.01 220);
--color-base: oklch(15% 0.02 220);
--color-on-base: oklch(92% 0.01 220);
}
}
```
[**Explore themes →**](https://frutjam.com/themes)
---
## Plugin Options
| Option | Default | Description |
|--------|---------|-------------|
| `prefix` | `""` | Prefix all Frutjam class names (e.g. `fj` → `fj-btn`) |
| `reset` | `true` | Include browser reset and element defaults |
| `root` | `":root"` | Remap CSS variable declarations to a custom selector |
| `logs` | `true` | Show build-time console output |
| `include` | `[]` | Include only specific components |
| `exclude` | `[]` | Exclude specific components |
---
## CDN (No Build Step)
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam/dist/frutjam.min.css" />
```
---
## Framework Support
| Framework | Status |
|-----------|--------|
| HTML / Static sites | ✅ |
| React / Next.js | ✅ |
| Vue / Nuxt | ✅ |
| Svelte / SvelteKit | ✅ |
| HTMX | ✅ |
| Django | ✅ |
| Laravel / Blade | ✅ |
| Astro | ✅ |
| Ruby on Rails | ✅ |
| Any HTML output | ✅ |
---
## Documentation
- [Getting Started](https://frutjam.com/docs/overview)
- [Installation Guide](https://frutjam.com/docs/installation)
- [Configuration](https://frutjam.com/docs/configuration)
- [Theming](https://frutjam.com/docs/themes)
- [Colors](https://frutjam.com/docs/colors)
- [All Components](https://frutjam.com/components)
- [UI Blocks](https://frutjam.com/blocks)
- [Cherry MCP](https://frutjam.com/products/cherry)
---
## Community
- [Discord](https://discord.gg/FvjytjQSSZ)
- [X / Twitter](https://x.com/FrutjamUI)
- [Write for Us](https://frutjam.com/write-for-us)
---
## Contributing
1. Fork the repository
2. Create a feature branch: `git checkout -b feature/my-component`
3. Commit your changes: `git commit -m 'Add my-component'`
4. Push: `git push origin feature/my-component`
5. Open a Pull Request
---
## License
MIT — free for personal and commercial use. See [LICENSE](LICENSE).
---
## ⭐ Star this repo
If Frutjam saves you time, a star helps others find it.
[](https://github.com/nezanuha/frutjam)
---
[jsdelivr]: https://badgen.net/jsdelivr/hits/npm/frutjam
[npm_installs]: https://badgen.net/npm/dt/frutjam