Installation

Install Frutjam in minutes by adding the package and registering the plugin in your Tailwind config. Works with any Tailwind CSS project and supports the prefix system so you can integrate it alongside existing styles without conflicts or breaking changes.

How to install Frutjam UI library in Tailwind CSS project?

Make sure you have a working Tailwind CSS project installed, as well as Node and NPM on your computer. Frutjam works with Tailwind version 4.

Install frutjam as a Node package by running the following command:

1

npm i -D frutjam

Add Frutjam to your input.css using the @plugin directive:

1
2

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

JavaScript & React — Optional, Not Required

Frutjam is native-first and CSS-first. The vast majority of components — buttons, badges, cards, forms, alerts, and more — work with pure HTML and CSS, zero JavaScript needed. Native HTML elements like <dialog>, <details>, and <input type="checkbox"> handle interactivity where browsers already support it.

A small number of components have no native HTML equivalent (toast notifications, combobox filtering, carousel controls). For those cases only, Frutjam ships lightweight optional helpers.

Vanilla JS — frutjam/js

Framework-agnostic ES module helpers for the components that need them. Attach to any DOM element — no framework required.

1
2
3
4
5
6

import { createModal } from 'frutjam/js'

const modal = createModal(document.getElementById('myModal'))
modal.open()   // calls showModal()
modal.close()  // calls close()
modal.toggle()

React Hooks — frutjam/react

Thin React wrappers around the same native DOM calls. Each hook returns a ref you attach to the element and methods to control it — no extra dependencies beyond React itself.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { useModal } from 'frutjam/react'

export default function App() {
  const modal = useModal()
  return (
    <>
      <button onClick={modal.open}>Open</button>
      <dialog ref={modal.ref} className="modal">...</dialog>
    </>
  )
}

Available for: useModal, useDrawer, useCollapsible, useTooltip, useTabs, useToast, useCarousel, useCombobox.

Using a CDN

Use the CDN version of the frutjam UI library for fast and easy integration without local setup. Use this CDN version of frutjam only for development purposes, not in production.

1
2

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@/dist/frutjam.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>