---
title: "Installation"
type: guide
version: "2.2.1"
doc_version: "2.4.5"
status: stable
date: 2026-04-21
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Install Frutjam CSS-only Tailwind CSS UI library. Two imports, zero JavaScript, Tailwind v4 compatible. Works with Django, HTMX, Laravel, and React."
url: https://frutjam.com/docs/installation
---

# Installation

## How to install Frutjam UI library in Tailwind CSS project?

Make sure you have a working [Tailwind CSS](https://tailwindcss.com/docs/installation/using-vite) project installed, as well as [Node](https://nodejs.org/en/download) and NPM on your computer. Frutjam works with Tailwind version 4.

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

```bash
npm i -D frutjam
```
Add Frutjam to your `input.css` using the `@plugin` directive:

```css
@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. All components are WCAG AA accessible out of the box and work with Django, HTMX, Laravel, React, Next.js, and any stack.

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.

```js
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.

```react
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.

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


## Next Steps

Once installed, try the [button component](/components/button) to see Frutjam in action, or explore the full [component library](/components).

AI Editor Integration

### Using Claude Code, Cursor, or another AI editor?

Cherry MCP brings Frutjam's full component library directly into your AI editor's context — accurate class names, live docs, no copy-pasting.

[Learn about Cherry MCP →](/products/cherry)

Want to understand the thinking behind Frutjam's CSS-first approach? [Read why we built it this way →](/blog/why-i-built-frutjam-css-first-tailwind-ui-library)