---

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 · 📦 npm · 🍒 Cherry MCP

---

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

npm install -D frutjam

@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

{
  "mcpServers": {
    "frutjam": {
      "command": "npx",
      "args": ["-y", "frutjam-cherry"]
    }
  }
}

Get Cherry MCP →

---

Components

65+ free, production-ready CSS-only Tailwind CSS components:

Inputs & Forms

• Button
• Checkbox
• Radio
• Toggle
• Input
• Textarea
• Select
• Range
• Rating
• Combobox

Layout & Navigation

• Navbar
• Sidebar
• Drawer
• Menu
• Breadcrumb
• Tabs
• Steps
• Footer
• Header
• Join
• Pagination

Feedback & Overlay

• Modal
• Toast
• Alert
• Tooltip
• Popover
• Loading
• Skeleton
• Progress
• Radial Progress

Data Display

• Card
• Table
• Stat
• Badge
• Tag
• Avatar
• Indicator
• Diff
• Timeline
• Chat

Typography & Decoration

• Hero
• Divider
• Kbd
• Link
• Mask
• Swap
• Countdown
• Marquee
• Carousel
• Accordion
• Collapsible
• Surface

Browse all components with live previews →

---

Usage Examples

<!-- 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 data-theme="darkberry">

/* 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 →

---

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)

<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
• Installation Guide
• Configuration
• Theming
• Colors
• All Components
• UI Blocks
• Cherry MCP

---

Community

• Discord
• X / Twitter
• 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.

---

⭐ Star this repo

If Frutjam saves you time, a star helps others find it.

---