Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Open Source · MIT Licensed · Free Forever

Accessible, CSS-Only Tailwind CSS Component Library for Fast Development

Frutjam is a blazing-fast, open-source UI library built for developers who care about accessibility, standards, and seamless integration with Tailwind CSS.

W3C-compliant, SEO-friendly, and easy to use.

View on GitHub Get Started
Leave a review on Product Hunt A Product Hunt review badge for Frutjam encouraging users to leave feedback. LEAVE A REVIEW ON Product Hunt
PageSpeed Score
100/100
Performance · Accessibility · SEO
License
MIT
Free forever, no restrictions
JS Dependencies
0
Pure CSS, no JavaScript required
Accessibility
WCAG
AA / AAA compliant out of the box

Highly customizable

Powered by Tailwind CSS utility classes

Frutjam gives you clean component classes out of the box, while leaving every Tailwind utility available for customization. Change spacing, colors, layout, and interactions easily with utility classes on top of Frutjam components.

Customizable components

Each Frutjam component is designed to accept Tailwind utilities, so you can tweak styles without writing custom CSS.

Utility-first control

Use Tailwind classes like text-lg, px-6, and bg-base-200 to tailor components in minutes.

Get started in seconds

Two imports and you're ready to build. No build tools, no configuration, no runtime.

Step 1

Install via npm

Add Frutjam to your project with a single command.

bash 
npm install frutjam

Step 2

Import in your CSS

Add both Tailwind and Frutjam to your stylesheet.

css 
1
2
@import "tailwindcss";
@import "frutjam";

Step 3

Use clean components

Write semantic classes instead of long utility chains.

html 
1
2
3
<button class="btn btn-primary">
    Get Started
</button>
Full Installation Guide

See it in action

Real components, real code — copy and ship.

Buttons

html 
1
2
3
4
5
6
<div class="flex flex-wrap gap-2">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-outline">Outline</button>
    <button type="button" class="btn btn-soft btn-success">Success</button>
    <button type="button" class="btn btn-soft btn-error">Danger</button>
</div>

Badges & Labels

Primary Active Pending Error Default
html 
1
2
3
4
5
6
7
<div class="flex flex-wrap gap-2">
    <span class="badge badge-primary">Primary</span>
    <span class="badge badge-success">Active</span>
    <span class="badge badge-warning">Pending</span>
    <span class="badge badge-error">Error</span>
    <span class="badge">Default</span>
</div>

Button Sizes

html 
1
2
3
4
5
6
<div class="flex flex-wrap items-center gap-2">
    <button type="button" class="btn btn-primary btn-xs">XSmall</button>
    <button type="button" class="btn btn-primary btn-sm">Small</button>
    <button type="button" class="btn btn-primary">Base</button>
    <button type="button" class="btn btn-primary btn-lg">Large</button>
</div>

Card

Card Title

A clean, accessible card component ready to use in any project.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="card card-sm card-outline">
    <div class="card-content">
        <h4 class="card-title">Card Title</h4>
        <p>A clean, accessible card component ready to use in any project.</p>
        <div class="flex gap-2 mt-3">
            <button type="button" class="btn btn-primary btn-sm">Action</button>
            <button type="button" class="btn btn-outline btn-sm">Cancel</button>
        </div>
    </div>
</div>
Browse all components

Why use Frutjam UI library?

Frutjam is a free, open-source CSS-only UI library built with Tailwind CSS v4 that focuses on accessibility and faster development. It doesn't require complicated JavaScript configuration or huge JS bundles — making it a lightweight DaisyUI alternative for teams who need WCAG-compliant components with zero JavaScript overhead.

Just add @import "frutjam" to your stylesheet to get started. Frutjam removes the need for lengthy Tailwind CSS class lists in your HTML; just use clean, semantic classes to build components easily. Easily customise themes using simple CSS variables, and all components update instantly.

W3C web standards icon An icon representing W3C web standards with a document, code brackets, and W3C text.

W3C Standards

Clean, valid HTML for modern web apps.

Accessibility icon A stylized human figure with arms outstretched inside a circle, representing accessibility and inclusion.

Accessibility First

Every component is built with a11y in mind.

Color contrast accessibility icon A symbol showing a split circle with currentColor and white halves and a color dropper, representing color contrast and accessibility.

Color Contrast

Components pass WCAG AA/AAA color contrast checks out of the box.

SEO Crawler Icon An icon showing the letters SEO and a small scanning robot inside a browser window.

SEO Friendly

Semantic markup for better search engine visibility.

Web developer icon A rounded code editor window with colored control buttons and several lines of code, representing a developer-friendly interface.

Developer Friendly

Simple, intuitive API and easy integration.

CSS code icon A developer window split into HTML and CSS sides with toolbar and code symbols.

CSS & HTML First

No JavaScript lock-in — style and structure come first.

Tailwind CSS Icon Tailwind CSS wave icon centered inside a currentColor circular border.

Tailwind CSS Support

Works perfectly with your existing Tailwind workflow.

RTL support icon A right-to-left text icon showing right-aligned text lines and a slightly lower left-pointing arrow.

RTL Support

Fully compatible with right-to-left languages.

Responsive design icon Minimalist icon showing a desktop monitor, tablet, and phone to represent responsive web design.

Responsive

Looks great on any device, any screen size.

Actively Developing Software An icon showing a code window with code brackets and a sparkle star inside, representing new features in active development.

Actively Maintained

New components, updates, and community support.

Palette icon An icon showing a painter's palette with multiple paint spots.

Professional Themes

Switch between light and dark modes, or create your own.

Prebuilt Layouts & Components An icon showing nested rectangles and blocks to represent modular UI layouts and reusable components.

Prebuilt Layouts & Components

Ready-to-use building blocks for any project.

Open Source An icon showing an open padlock with a code symbol to represent open source software.

Open Source

MIT licensed and community-driven.

Plug icon Icon representing the plugin being connected to the socket

Plugin Support

Extend Frutjam with useful plugins like the Markdown Text Editor.

Arrow down wide narrow

Reduce DOM Size

A large number of nested or unnecessary elements can cause rendering to slow down. Simplify your component structure and improve performance and maintainability.

100/100 on Google PageSpeed Insights

Achieve a perfect 100 in Performance, Accessibility, Best Practices, and SEO using Frutjam UI library. This website is built entirely with Frutjam UI and achieved an overall score of 100/100 on Google PageSpeed Insights.

Websites run faster, provide a better user experience, and have higher search ranks. In today's AI-driven web, faster sites are prioritized—AI tools frequently scan websites in real time, and they prefer fast, efficient pages that don't waste computational resources. Build smarter with a future-ready UI library.

Performance
Accessibility
Best Practices
SEO
frutjam.com on PageSpeed

Pure CSS, no JavaScript needed. Framework-agnostic and fully compatible everywhere.

Frutjam UI library does not require huge JavaScript bundles since it is written in pure CSS. This makes your project lightweight and optimized for faster load times and smoother performance. It works perfectly with any web framework or backend, whether you're using React, Vue, Angular, Next.js, Django, HTMX, Laravel, or just plain HTML.

How to Use

For Modern Frameworks

Your framework is fast. Keep it that way.

Next.js, Svelte, and Vue are engineered for blazing performance and SEO — server rendering, minimal JS, instant hydration. But the moment you add a heavy component library full of bloated JavaScript for something as simple as a modal, you trade away everything those frameworks promise.

Frutjam is CSS-first and native-first by design. No JavaScript bundles. No runtime overhead. No layout shift. Your framework's performance ceiling becomes your actual performance — not just a theoretical one.

Zero Layout Shift

Pure CSS components render instantly with the page — no JavaScript needed to paint the UI. Your Cumulative Layout Shift (CLS) stays at 0, preserving that perfect PageSpeed score.

No JS Overhead

Every KB of JavaScript your framework saves from bundle-splitting, Frutjam never adds back. Buttons, cards, modals, badges — all in CSS. Your Time to Interactive stays fast.

SEO That Delivers

Semantic HTML, W3C-valid markup, and WCAG color contrast out of the box. Search engines read clean structure. Pair a modern framework with Frutjam and your pages rank and perform.

0ms
JS Execution for UI
0
Layout Shifts (CLS)
W3C
Valid Markup
AA+
WCAG Contrast
😎

No more ugly HTML, fewer class names, easily maintainable, and faster development.

No More Messy Classes: One Class Does It All. Instead of writing a clutter of classes every time for every element, every page, and every project, again and again, use Frutjam component class names for easy maintenance and scaling and faster development without the headache of clutter classes.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
// Styling a simple button in Tailwind css clutter of utility class
<button class="bg-gray-100 text-gray-900
text-sm px-3.5 border font-semibold duration-200 py-2
transition-all hover:border-gray-300 hover:bg-gray-200
focus-visible:outline-2 focus-visible:outline-offset-2
focus-visible:outline-gray-900 inline-flex gap-2
rounded-sm active:border-gray-300 active:bg-gray-200
active:shadow-none text-center align-middle cursor-pointer
border-gray-200 dark:border-gray-700 dark:bg-neutral-700
dark:text-gray-300 dark:hover:border-gray-950 dark:hover:bg-gray-950
dark:focus-visible:outline-gray-200 dark:active:border-gray-950
dark:active:bg-gray-900">
    Button
</button>

// Styling a simple button in frutjam component class
<button class="btn">
    Button
</button>
Result:
html 
<button type="button" class="btn">Button</button>

Themes & Customization

Frutjam uses simple CSS variables for theming. Change one variable and every component updates instantly — no rebuild, no class changes.

css 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
/* Override the default theme in your CSS */
:root {
    --color-primary: oklch(55% 0.2 250);
    --color-primary-content: #fff;
    --radius-base: 0.5rem;
    --font-base: "Inter", sans-serif;
}

/* Dark mode overrides */
[data-theme="dark"] {
    --color-base-100: oklch(15% 0.01 250);
    --color-base-content: oklch(90% 0.01 250);
}

What you can customize

Colors

Primary, secondary, accent, error, success, warning and all base shades — all via a single CSS variable each.

Border Radius

--radius-base scales all components at once — change one variable, every element updates.

Typography

Font family, size scale, and line height — set your type system once and all components inherit it.

Spacing & Sizing

Component padding and size variants — use built-in size modifiers or override spacing tokens globally.

Component Library

A growing collection of prebuilt, accessible components for every use case.

See All Components

Buttons & Forms

Button variants, inputs, checkboxes, selects, and full form layouts.

Modals & Dialogs

Accessible modal dialogs, drawers, and confirmation prompts.

Navigation

Navbars, sidebars, breadcrumbs, and tab navigation.

Cards & Layouts

Card variants, grid systems, and page layout skeletons.

Alerts & Toasts

Status alerts, notification banners, and inline feedback messages.

Badges & Tags

Status badges, category tags, and label components.

Lists & Tables

Data tables, ordered/unordered lists, and definition lists.

Plugins

Markdown editor, syntax highlighter, and more useful extensions.

Community Plugin

Loved by backend developers. Native-first Markdown editor.

Most editors break the standard web workflow. MarkdownEditor embraces it — sitting directly on top of a <textarea> so your backend never knows anything changed. It just works with form method="POST", standard DOM access, and every server framework out of the box.

Replace a plain <textarea> with one line of JS and your users get a 10× better experience while your Django, Laravel, or PHP controller stays exactly as it was.

  • No data binding needed — works with form method="POST" out of the box
  • Standard access — read and write with element.value like any input
  • Backend agnostic — PHP, Django, Node.js, Laravel, Rails — all just read a plain string
  • ~116 KB — hybrid WYSIWYG + plain mode, RTL, image upload, live preview, zero CSS conflicts
View Full Documentation

Live demo — try it out:

Drop-in replacement — one class, one line of JS. Backend unchanged.

Native Form Integration

Enhances a standard <textarea>. Submit with a normal <form> and access content via request.POST['name']. No preventDefault(), no FormData construction.

Advanced Image Upload

Configure server uploads via API. Images go directly to your CDN — no Base64 bloat in your database, no SEO penalty, no memory-heavy payloads.

High Performance

Debounced preview updates, cached style calculations, and conflict-free keyboard handling. Handles thousands of lines without input lag — and all editor styles are fully scoped so it lives safely alongside any CSS framework.

How does Frutjam compare?

See how Frutjam stacks up against plain Tailwind CSS, Bootstrap, and DaisyUI as a free, accessible alternative.

Feature Frutjam DaisyUI Plain Tailwind Bootstrap
CSS-only (no JavaScript required) ✓ ✓ ✓ Partial
Semantic component classes ✓ ✓ ✗ ✓
WCAG AA contrast guaranteed on every component ✓ Manual Manual Partial
Works alongside Tailwind utilities ✓ ✓ ✓ ✗
CSS variables theming ✓ ✓ ✓ Limited
100/100 PageSpeed achievable ✓ ✓ Varies Varies
RTL support ✓ Partial Partial ✓
Framework agnostic (Django, HTMX, Laravel) ✓ ✓ ✓ ✓
Theme via plain CSS variables, no config file ✓ Partial Manual ✗
AI editor integration (MCP / context) ✓ Free Paid ✗ ✗

AI Editor Integration

Using Claude Code, Cursor, or Copilot?

Cherry MCP connects Frutjam directly to your AI editor. Get accurate component code, correct class names, and up-to-date docs — without copy-pasting from the browser.

Try Cherry MCP
Correct Frutjam class names, every time
Up-to-date component docs in your AI context
Works with Claude Code, Cursor, Windsurf, and more

Frequently asked questions

Everything you need to know about Frutjam.

Is Frutjam free to use?

Yes — Frutjam is MIT licensed and completely free. Use it in personal projects, client work, and commercial products with no restrictions, no attribution required.

Is Frutjam suitable for commercial projects?

Yes. Frutjam is open source under the MIT license, which permits free use in both personal and commercial products without any royalties or restrictions.

Does Frutjam replace Tailwind CSS?

No — Frutjam builds on top of Tailwind. Think of it as a layer that adds semantic component classes (.btn, .card, .badge) while keeping all Tailwind utility classes available alongside it.

Do I need JavaScript to use Frutjam?

No JavaScript required. Frutjam is pure CSS — components like buttons, cards, badges, and forms work entirely without a JS runtime. For interactive patterns like modals or dropdowns, it pairs well with lightweight libraries like Alpine.js or HTMX.

Can I use Frutjam with React, Vue, or Angular?

Yes — Frutjam is completely framework-agnostic. It works with any templating system or JS framework including React, Vue, Angular, Svelte, Next.js, Nuxt, Laravel, Django, and plain HTML. Just import the CSS and use the classes.

Is Frutjam accessible for screen readers?

Yes. Frutjam follows WAI-ARIA guidelines with appropriate roles, keyboard navigation support, and WCAG AA/AAA color contrast out of the box — making it accessible to all users without extra configuration.

Does PageSpeed improve when using Frutjam?

Yes. Frutjam's CSS-first approach avoids render-blocking JavaScript entirely. Combined with W3C-valid markup, proper color contrast, and native HTML semantics, it contributes directly to better Core Web Vitals and a 100/100 PageSpeed score.

How do I customize colors, fonts, and radius?

Override CSS variables in your stylesheet — set --color-primary, --font-base, --radius-base, and more. Every component picks up the change instantly without a rebuild or any class changes in your HTML.

From the Blog

Thoughts on building Frutjam and the CSS-first approach to UI.

View All Posts
Frutjam vs DaisyUI — CSS-only Tailwind CSS component library comparison

The Best DaisyUI Alternative: CSS-Only Tailwind Components Without JavaScript

Why developers are switching from DaisyUI to Frutjam — a CSS-only Tailwind CSS component library that passes WCAG AA by default and requires zero JavaScript.
frutjam CSS-first Tailwind UI library vs bloated JS libraries — PageSpeed 100

Why I Stopped Using JavaScript-Heavy UI Libraries (And Built a CSS-First Tailwind Component Library)

Achieve 100% PageSpeed scores by default. A guide to building high-performance, RTL-ready platforms using native HTML5 and CSS-first components.

Open Source & Free Forever

Join the Community

Frutjam is open source and community-driven. Every component, fix, and idea from the community makes it better for everyone.

Found a bug? Have a feature request? Want to contribute a component or improve the docs? We'd love to have you.

Contribute on GitHub Read the Docs