Frutjam

CSS-only Tailwind CSS v4 component library. 65+ accessible, copy-paste UI components — zero JavaScript, WCAG AA guaranteed, framework-agnostic.

frutjam.com · Components · Docs · Cherry MCP

Install

npm install -D frutjam

@import "tailwindcss";
@plugin "frutjam";

That's it. All 65+ components available immediately.

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam/dist/frutjam.min.css" />

Usage

<!-- Button -->
<button class="btn btn-primary">Get Started</button>
<button class="btn btn-outline">Cancel</button>

<!-- Badge -->
<span class="badge badge-success">Active</span>
<span class="badge badge-error badge-soft">Error</span>

<!-- Alert -->
<div class="alert alert-success">Saved successfully.</div>

<!-- Card -->
<div class="card">
  <div class="card-content">
    <h2 class="heading-lg">Title</h2>
    <p class="para">Content goes here.</p>
  </div>
</div>

<!-- Input -->
<input type="text" class="input" placeholder="Enter text...">

<!-- CSS-only modal — no JavaScript -->
<button popovertarget="modal" class="btn btn-primary">Open</button>
<dialog id="modal" popover class="modal">
  <div class="modal-content">
    <h3 class="heading-lg">Modal title</h3>
    <button popovertarget="modal" class="btn mt-4">Close</button>
  </div>
</dialog>

Plugin Options

@plugin "frutjam" {
  prefix: fj;    /* fj-btn, fj-card, etc. */
  reset: true;   /* browser reset (default: true) */
}

🍒 Cherry MCP — Stop AI from hallucinating class names

Cherry is a free MCP server that gives Claude Code, Cursor, and VS Code accurate real-time Frutjam docs — no more invented class names.

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

Get Cherry →

Links

• Full documentation
• All 65+ components
• UI Blocks
• Themes
• GitHub
• Discord

License

MIT