---
title: "Installation"
type: guide
version: "2.0.4"
doc_version: "2.0.4"
status: stable
date: 2026-04-21
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Learn how to install Frutjam. Add the package and register the Tailwind plugin to start building accessible, semantic UI components right away."
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.

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.

```js
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@/dist/frutjam.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
```