---
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/tr/docs/installation
---

# Installation

## Tailwind CSS projesine Frutjam UI kütüphanesi nasıl kurulur?

Bilgisayarınızda çalışan bir [Tailwind CSS](https://tailwindcss.com/docs/installation/using-vite) projesinin yanı sıra [Node](https://nodejs.org/en/download) ve NPM'nin yüklü olduğundan emin olun. Frutjam, Tailwind sürüm 4 ile çalışır.

### Aşağıdaki komutu çalıştırarak frutjam'ı Node paketi olarak yükleyin:

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

`@plugin` yönergesini kullanarak Frutjam'ı `input.css` dosyanıza ekleyin:

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

## JavaScript ve React – İsteğe Bağlı, Gerekli Değil

Frutjam **yerel öncelikli ve CSS önceliklidir**. Bileşenlerin büyük çoğunluğu (düğmeler, rozetler, kartlar, formlar, uyarılar ve daha fazlası) saf HTML ve CSS ile çalışır, hiçbir JavaScript gerektirmez. `<dialog>`, `<details>` ve `<input type="checkbox">` gibi yerel HTML öğeleri, tarayıcıların zaten desteklediği durumlarda etkileşimi yönetir. Tüm bileşenlere WCAG AA kullanıma hazırdır ve Django, HTMX, Laravel, React, Next.js ve herhangi bir yığınla çalışır.

Az sayıda bileşenin yerel HTML eşdeğeri yoktur (kısmen bildirimler, birleşik giriş kutusu filtreleme, atlıkarınca kontrolleri). Frutjam yalnızca bu durumlar için hafif, isteğe bağlı yardımcılar gönderir.

### Vanilya JS — `frutjam/js`

İhtiyaç duyan bileşenler için çerçeveden bağımsız ES modülü yardımcıları. Herhangi bir DOM öğesine ekleyin; çerçeve gerekmez.

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

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

### Tepki Kancaları — `frutjam/react`

Aynı yerel DOM çağrılarının etrafındaki ince React sarmalayıcıları. Her kanca, öğeye eklediğiniz bir `ref` ve onu kontrol etme yöntemlerini döndürür; React'ın kendisinden başka ekstra bağımlılık yoktur.

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

Şunlar için kullanılabilir: `useModal`, `useDrawer`, `useCollapsible`, `useTooltip`, `useTabs`, `useToast`, `useCarousel`, `useCombobox`.

### CDN kullanma

Yerel kurulum gerektirmeden hızlı ve kolay entegrasyon için frutjam UI kitaplığının CDN sürümünü kullanın. Frutjam'ın bu CDN sürümünü yalnızca geliştirme amacıyla kullanın, üretimde değil.

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

## Sonraki Adımlar

Kurulduktan sonra, Frutjam'ı çalışırken görmek için [düğme bileşenini](/tr/components/button) deneyin veya [bileşen kitaplığının](/tr/components) tamamını keşfedin.

AI Düzenleyici Entegrasyonu

### Claude Code, Cursor veya başka bir AI düzenleyiciyi mi kullanıyorsunuz?

Cherry MCP, Frutjam'ın tüm bileşen kitaplığını doğrudan AI editörünüzün bağlamına getirir; doğru sınıf adları, canlı belgeler, kopyala-yapıştır gerektirmez.

[Cherry MCP hakkında bilgi edinin →](/tr/products/cherry)

Frutjam'ın CSS öncelikli yaklaşımının ardındaki düşünceyi anlamak ister misiniz? [Neden bu şekilde oluşturduğumuzu okuyun →](/blog/why-i-built-frutjam-css-first-tailwind-ui-library)