Installation

Install Frutjam, the CSS-only Tailwind CSS UI library, in minutes. Two imports, zero JavaScript, WCAG accessible components out of the box. Works with Django, HTMX, Laravel, React, and any Tailwind CSS v4 project.

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

Bilgisayarınızda çalışan bir Tailwind CSS projesinin yanı sıra Node 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:

npm i -D frutjam

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

1
2

@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.

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()

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.

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

Ş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.

1
2

<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 deneyin veya bileşen kitaplığının tamamını keşfedin.

Frutjam'ın CSS öncelikli yaklaşımının ardındaki düşünceyi anlamak ister misiniz? Neden bu şekilde oluşturduğumuzu okuyun →