Frutjam
Free Tailwind v4 component library.
Is this your product? Claim it to edit the listing, post updates and answer questions. Prove it with an email address at the product's domain (the listing becomes Claimed), or put the LotsDirectory badge on your website (the listing becomes Verified, and its link to your website is followed while the badge is live).
Description
Free Tailwind v4 component library. 65+ CSS-only components, WCAG AA/AAA, zero JavaScript. Works with Django, HTMX, Laravel, React, and any stack.
About Frutjam
What is Frutjam?
Frutjam is a free, open-source, CSS-only UI library built with Tailwind CSS v4. It is MIT licensed, framework-agnostic, and uses zero JavaScript.
What Frutjam does
Frutjam gives semantic component classes for buttons, badges, labels, cards, and layouts, while Tailwind utilities stay available for customization. Themes use CSS variables, and a change to one variable updates components with no rebuild. Pro and Team plans add premium UI blocks, templates, and unlimited Cherry MCP requests.
Who Frutjam is for
Frutjam is for teams who need WCAG-compliant components with zero JavaScript. It works with Django, HTMX, Laravel, React, and any stack.
How Frutjam works
Install via npm, import it in the CSS, and add @plugin frutjam to the stylesheet. Use clean semantic classes instead of long Tailwind class lists. Cherry MCP gives an AI editor the class names and structure. Pure CSS components render with the page, and no JavaScript is needed to paint the UI.
Key features
- CSS-only components for Tailwind CSS v4, with zero JavaScript and no JS bundle.
- WCAG AA and AAA accessibility, color contrast, RTL support, and responsive layout.
- Buttons, badges, labels, cards, prebuilt layouts, and professional themes.
- CSS variables for theming. Change one variable and components update, with no rebuild and no class changes.
- Works with Django, HTMX, Laravel, React, and any stack. The setup uses the same configuration as Tailwind CSS.
- W3C standards, SEO, DOM size, and plugin support.
- The core library is MIT licensed, open source, and actively maintained, with community support.
- Cherry MCP gives an AI editor the Pricing class names and structure on demand. Pro and Team add unlimited Cherry MCP requests.
Pricing
As listed on frutjam.com, checked 19 October 2026. Prices can change; see the site for current terms.
- The core component library is free and open source, MIT licensed, and described as free forever.
- Pro and Team plans add premium UI blocks, templates, and unlimited Cherry MCP requests for AI editor integration.
Facts from frutjam.com, checked 19 October 2026
- MIT licensed and described as free forever.
- Built with Tailwind CSS v4.
- CSS-only, with zero JavaScript.
- WCAG AA and AAA.
- Works with Django, HTMX, Laravel, React, and any stack.
- Install via npm.
- Cherry MCP is the AI editor integration.
Written from Frutjam's own website (Homepage, Pricing, Features, Docs). The maker can claim this listing to edit it.
Categories
Frequently asked questions
Is Frutjam free and open source?
Yes. The core component library is free and open source, MIT licensed, and described as free forever.
Does it need JavaScript?
No. Frutjam is CSS-only, with zero JavaScript. Pure CSS components render with the page, and no JavaScript is needed to paint the UI.
Which stacks does it work with?
It is framework-agnostic and works with Django, HTMX, Laravel, React, and any stack. The configuration is the same as Tailwind CSS.
How are themes changed?
Frutjam uses CSS variables. Change one variable and every component updates, with no rebuild and no class changes. Radius, font family, size scale, and line height can be set once.
What do Pro and Team add?
Pro and Team plans add premium UI blocks, templates, and unlimited Cherry MCP requests for AI editor integration.
How does an editor get the class names?
Cherry MCP gives an AI editor the Pricing class names and structure on demand.