---
title: "Installation"
type: guide
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
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/pl/docs/installation
---

# Installation

## Jak zainstalować bibliotekę Frutjam UI w projekcie CSS Tailwind?

Upewnij się, że masz zainstalowany działający projekt [Tailwind CSS](https://tailwindcss.com/docs/installation/using-vite), a także [Node](https://nodejs.org/en/download) i NPM na swoim komputerze. Frutjam współpracuje z Tailwindem w wersji 4.

### Zainstaluj frutjam jako pakiet Node, uruchamiając następującą komendę:

```bash
npm i -D frutjam
```

Dodaj Frutjama do swojego `input.css` za pomocą dyrektywy `@plugin`:

```css
@import "tailwindcss";
@plugin "frutjam";
```

## JavaScript & Reaguj — opcjonalne, niewymagane

Frutjam jest **najpierw natywny i CSS**. Zdecydowana większość komponentów — przycisków, plakietek, kart, formularzy, alertów i innych — działa w czystym HTMX i CSS, bez konieczności używania JavaScript. Natywne elementy HTMX, takie jak `<dialog>`, `<details>` i `<input type="checkbox">` obsługują interaktywność tam, gdzie przeglądarki już ją obsługują. Wszystkie komponenty są dostępne w formacie WCAG AA od razu po wyjęciu z pudełka i współpracują z Django, HTMX, Laravel, React, Next.js i dowolnym stosem.

Niewielka liczba komponentów nie ma natywnego odpowiednika HTML (powiadomienia tostowe, filtrowanie comboboxów, kontrolki karuzeli). Tylko w takich przypadkach Frutjam dostarcza lekkich opcjonalnych pomocników.

### Waniliowy JS — `frutjam/js`

Pomocnicy modułów ES niezależny od platformy dla komponentów, które ich potrzebują. Dołącz do dowolnego elementu DOM — nie jest wymagana żadna struktura.

```js
import { createModal } from 'frutjam/js'

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

### Hooki reagujące — `frutjam/react`

Thin React otacza te same natywne wywołania DOM. Każdy hak zwraca `ref`, który dołączasz do elementu i metody jego kontrolowania — żadnych dodatkowych zależności poza samym Reactem.

```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>
    </>
  )
}
```

Dostępne dla: `useModal`, `useDrawer`, `useCollapsible`, `useTooltip`, `useTabs`, `useToast`, `useCarousel`, `useCombobox`.

### Korzystanie z CDN

Skorzystaj z wersji CDN biblioteki frutjam UI, aby uzyskać szybką i łatwą integrację bez konfiguracji lokalnej. Używaj tej wersji frutjamu CDN wyłącznie do celów programistycznych, a nie produkcyjnych.

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

## Następne kroki

Po zainstalowaniu wypróbuj [komponent przycisku](/pl/components/button), aby zobaczyć Frutjam w akcji, lub poznaj pełną [bibliotekę komponentów](/pl/components).

Integracja edytora AI

### Używasz kodu Claude'a, kursora lub innego edytora AI?

Cherry MCP przenosi pełną bibliotekę komponentów Frutjam bezpośrednio do kontekstu edytora AI — dokładne nazwy klas, aktualne dokumenty, bez kopiowania i wklejania.

[Dowiedz się więcej o Cherry MCP →](/pl/products/cherry)

Chcesz zrozumieć tok myślenia stojący za podejściem Frutjam opartym na CSS? [Przeczytaj, dlaczego zbudowaliśmy to w ten sposób →](/blog/why-i-built-frutjam-css-first-tailwind-ui-library)