Open Source · MIT Licensed · Free Forever

Accessible, CSS-Only Tailwind UI 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

PageSpeed Score

100/100

Performance · Accessibility · SEO

License

MIT

Free forever, no restrictions

JS Dependencies

Pure CSS, no JavaScript required

Accessibility

WCAG

AA / AAA compliant out of the box

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.

npm install frutjam

Step 2

Import in your CSS

Add both Tailwind and Frutjam to your stylesheet.

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

Step 3

Use clean components

Write semantic classes instead of long utility chains.

<button class="btn btn-primary">
    Get Started
</button>

Full Installation Guide

See it in action

Real components, real code — copy and ship.

Buttons

<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>

View Code

Badges & Labels

Primary Active Pending Error Default

<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>

View Code

Button Sizes

<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>

View Code

Card

Card Title

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

<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>

View Code

Browse all components

Why use Frutjam UI library?

Frutjam is a UI library built with Tailwind CSS that focuses on faster development and ease of use. It doesn't require complicated JavaScript configuration or huge JS bundles since it is framework-agnostic.

Just add @import "frutjam" to your stylesheet to get started. Frutjam removes the need for lengthy Tailwind 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 Standards

Clean, valid HTML for modern web apps.

Accessibility First

Every component is built with a11y in mind.

Color Contrast

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

SEO Friendly

Semantic markup for better search engine visibility.

Developer Friendly

Simple, intuitive API and easy integration.

CSS & HTML First

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

Tailwind CSS Support

Works perfectly with your existing Tailwind workflow.

RTL Support

Fully compatible with right-to-left languages.

Responsive

Looks great on any device, any screen size.

Actively Maintained

New components, updates, and community support.

Professional Themes

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

Prebuilt Layouts & Components

Ready-to-use building blocks for any project.

Open Source

MIT licensed and community-driven.

Plugin Support

Extend Frutjam with useful plugins like the Markdown Text Editor.

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, whether you're using React, Vue, Angular, 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

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.

// 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:

<button type="button" class="btn">Button</button>

View Code

Themes & Customization

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

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

How does Frutjam compare?

See how Frutjam stacks up against building with plain Tailwind or Bootstrap.

Feature	Frutjam	Plain Tailwind	Bootstrap
CSS-only (no JavaScript required)	✓	✓	Partial
Semantic component classes	✓	✗	✓
WCAG AA/AAA color contrast	✓	Manual	Partial
Works alongside Tailwind utilities	✓	✓	✗
CSS variables theming	✓	✓	Limited
100/100 PageSpeed achievable	✓	Varies	Varies
RTL support	✓	Partial	✓
Framework agnostic	✓	✓	✓

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.

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