CSS-Only Tailwind CSS v4 UI Components – Frutjam

Frutjam is a CSS-only UI component library for Tailwind CSS v4 that styles buttons, forms, navigation, dialogs, tabs, and other web elements.

It includes reusable classes and light and dark themes built on OKLCH color tokens.

Frutjam also works through an UnoCSS preset or a compiled stylesheet for plain HTML.

It also comes with JavaScript helpers for programmatic dialog controls, tabs, toasts, and searchable comboboxes.

Features

• 50+ CSS UI components for forms, layouts, feedback, and data display.
• CSS variables for OKLCH-based light, dark, and custom themes.
• Tailwind CSS v4 plugin with responsive variants and selective component loading.
• UnoCSS preset and a compiled stylesheet for projects outside Tailwind.
• Optional framework-independent JavaScript helpers for interactive components.
• React hooks for dialogs, drawers, tabs, carousels, notifications, and more.
• Component class prefixes and scoped theme tokens for CSS integration.

Use Cases

• Admin dashboards with navigation, forms, status labels, data tables, and dialogs.
• Server-rendered Django, Laravel Blade, or HTMX screens that use plain HTML classes.
• Content sites and marketing pages that need consistent headings, cards, buttons, and themes.

How To Use It

Installation

Install frutjam with NPM:

npm install -D frutjam

Import Tailwind CSS and register the Frutjam plugin in the stylesheet processed by Tailwind:

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

Basic Usage

Use Frutjam classes in regular HTML. Set a theme on a parent element. This card example has a labeled email input, a status badge, and a save button.

<section class="wrapper-md" data-theme="snowberry">
  <div class="card card-outline">
    <div class="card-content">
      <h2 class="card-title">Workspace settings</h2>
      <p class="para-base">Manage your team's workspace.</p>
      <label for="team-email">Contact email</label>
      <input id="team-email" type="email" class="input"
             placeholder="[email protected]">
      <div class="card-actions">
        <button type="button" class="btn btn-primary">Save changes</button>
        <span class="badge badge-success">Active</span>
      </div>
    </div>
  </div>
</section>

Using Frutjam Without Tailwind CSS

The precompiled components bundle includes Frutjam’s base styles, default themes, components, and component utilities. It does not contain the general-purpose Tailwind utility library (flex, grid, p-4, etc.). Use standard CSS or your existing utility system for any additional layout styles.

For a bundler that accepts CSS imports:

import 'frutjam/css';

For a static HTML page, load the components-only CSS build. It does not include Tailwind utility classes. The @2 release selector follows version 2 updates; pin an exact release for production deployments.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@2/dist/frutjam.components.css">
<button type="button" class="btn btn-primary">Save</button>
<span class="badge badge-success">Published</span>

Including Tailwind Utilities Without a Build Step

The full Frutjam CSS distribution includes Tailwind’s general-purpose utilities as well as the component styles. Load this file when a static page needs classes such as flex, grid, and p-4.

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

A bundler can import this file through frutjam/css/full:

import 'frutjam/css/full';

Using the UnoCSS Preset

Frutjam exposes presetFrutjam() for UnoCSS projects. Use UnoCSS 66 or newer and configure its Wind4 preset before loading Frutjam.

// uno.config.js
import { defineConfig, presetWind4 } from 'unocss';
import { presetFrutjam } from 'frutjam/unocss';
export default defineConfig({
  presets: [presetWind4(), presetFrutjam()],
});

Interactive Combobox With Vanilla JavaScript

Use the optional JavaScript helper for a searchable combobox with keyboard navigation and selection events. The parent needs position: relative for its popup list. The following HTML uses Tailwind utility classes and a bundler that resolves frutjam/js.

<div id="framework-picker" class="relative w-64">
  <label for="framework-search">Framework</label>
  <input id="framework-search" class="input" type="text"
         placeholder="Search frameworks">
  <ul class="combobox-list" role="listbox">
    <li class="combobox-item" role="option" data-value="react">React</li>
    <li class="combobox-item" role="option" data-value="vue">Vue</li>
    <li class="combobox-item" role="option" data-value="svelte">Svelte</li>
  </ul>
</div>

import { createCombobox } from 'frutjam/js';
const picker = document.querySelector('#framework-picker');
createCombobox(picker);
picker.addEventListener('fj:select', (event) => {
  console.log(event.detail.value);
});

Displaying Toast Notifications

A static toast container needs only CSS, but notifications created from application events use the optional toast manager. duration: 0 keeps the message in the container until it is dismissed.

<div id="messages" class="toast toast-top toast-end"></div>

import { createToastManager } from 'frutjam/js';
const messages = createToastManager(document.querySelector('#messages'));
messages.success('Settings saved', { duration: 3500 });

Tailwind Plugin Configuration Options

Pass Frutjam plugin settings through an @plugin block. include and exclude use comma-separated component identifiers. If include contains entries, it takes precedence over exclude.

@import "tailwindcss";
@plugin "frutjam" {
  prefix: fj;
  reset: false;
  root: #admin;
  include: button, card, alert, badge;
  logs: false;
}

Class Prefixes With Tailwind

The Tailwind import prefix and Frutjam’s component prefix are independent. The first is a variant prefix, whereas the second changes Frutjam’s class names.

@import "tailwindcss" prefix(tw);
@plugin "frutjam" {
  prefix: fj;
}

<button type="button" class="tw:fj-btn tw:fj-btn-primary">
  Send message
</button>

UnoCSS Preset Options

presetFrutjam() accepts these three options:

Themes And CSS Variables

Use data-theme on the root element or on any container. The package includes Snowberry (snowberry or light) and Darkberry (darkberry or dark). Other palettes require custom theme values.

<main data-theme="snowberry">
  <section data-theme="darkberry">
    <button class="btn btn-primary">Dark section</button>
  </section>
</main>

Custom Themes

For custom themes, set the design tokens inside @layer theme. Choose foreground and background colors as matching pairs, and check contrast after changing the defaults.

@layer theme {
  [data-theme="forest"] {
    --scheme-color: dark;
    --border-radius: 0.5rem;
    --color-base: oklch(19% 0.03 155);
    --color-on-base: oklch(96% 0.02 155);
    --color-primary: oklch(72% 0.15 150);
    --color-on-primary: oklch(16% 0.02 150);
  }
}

Theme Token Reference

Root theme tokens use matching background and foreground color pairs. on-* variables supply the foreground colors.

Generated Color Tokens

Each color role also has these generated tokens. {color} stands for base, neutral, primary, secondary, accent, info, success, warning, or error.

Color Utility Families

For {color} roles, Tailwind CSS utilities use the semantic theme colors. These are the color utility families.

Typography And Layout Classes

The complete wrapper width series is wrapper, wrapper-xs, wrapper-sm, wrapper-md, wrapper-lg, wrapper-xl, wrapper-2xl, and wrapper-full.

Heading and paragraph classes accept standard sizes and numeric pixel values, including heading-46 and para-28.

Component CSS Class Reference

Frutjam CSS components use base classes plus modifiers for colors, sizes, layout, and state. The class inventory below includes their CSS utilities. Tailwind utility classes are configured through Tailwind itself.

Inputs & Forms

Layout & Navigation

Feedback & Overlay

Data Display

Typography & Decoration

Vanilla JavaScript Helpers

Frutjam exports 8 optional DOM helpers from frutjam/js. The CSS components do not require a global initialization call. Use these functions when a page needs programmatic controls, searchable selection, or dynamic notifications.

Toast Manager Options

For the Vanilla JS toast manager, show(message, { duration, type }) accepts duration (default 3000 milliseconds) and type (default an empty string). It returns the created alert element. success(message, options), error(message, options), warning(message, options), and info(message, options) specify the message type. Use dismiss(element) to remove a toast; duration: 0 disables timed removal.

JavaScript Helper Parameters

createTabs(tabsElement, panelsElement) accepts a tab list and an optional panel container. activate(index) uses a zero-based tab index. createCarousel(element).goTo(index) also uses a zero-based index and clamps it to available slides.

Combobox Selection Event

The combobox dispatches fj:select on its root when a selection is made. Listen on that root element; the custom event does not bubble. Its detail.value contains the selected item’s data-value or trimmed text.

React Hooks

React 18 or newer is required for the optional frutjam/react hooks. useToast().show() returns a toast ID; the Vanilla JS toast manager returns a DOM element. React toast options are duration (default 3000 milliseconds) and type (default an empty string).

Combobox Hook Filtering

useCombobox({ items, filterFn }) accepts an array of strings or objects with a label. A custom filterFn(items, query) can replace the default case-insensitive label filter.

All Frutjam UI 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

Feedback & Overlay

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

Data Display

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

Typography & Decoration

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

Cherry MCP Integration

Frutjam also has a separate Cherry MCP package for coding assistants. This integration supplies Frutjam component information to an MCP-capable editor. It is optional for building and running the UI.

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

Alternatives & Related Resources

• Copy-Paste CSS Components Library for Modern Web – Open Props UI
• Lightweight & Semantic UI Component Library – Oat UI
• Modular UI Component Library – vrembem
• Modern UI Components with CSS and Vanilla JavaScript – SimpUI
• Accessible UI Component Library for Vanilla JS & React – Monochrome