# Frutjam Kullanıcı Arayüzü Kitaplığı

Standartların ötesinde bir kullanıcı arayüzü sistemi. Erişilebilirlik, SEO ve Performans için Optimize Edilmiştir.

## Yüksek Düzey Standartlar
- **Anlamsal Verimlilik:** Class-soup'u tek bileşenli sınıflarla (ör. .btn) değiştirir.
- **Bakım ve Ölçeklendirme:** Daha hızlı geliştirme için merkezi tasarım mantığı.
- **Geliştirici Deneyimi:** Tailwind tarzı ön eki destekler (ör. tw-btn).
- **WCAG Renk Kontrastı:** Tüm bileşenler kutudan çıktığı haliyle AA/AAA oranlarını geçmektedir.
- **W3C Onaylandı:** Kesinlikle uyumlu, temiz HTML5 yapısı.
- **Erişilebilirlik (A11y):** Klavyeyle gezinme ve ARIA desenleri yerleşiktir.
- **SEO ve Anlambilim:** Arama motoru hakimiyeti için anlamlı HTML öğeleri.
- **DOM Verimliliği:** Düğüm derinliğini ve işleme gecikmesini azaltmak için optimize edildi.

## Özellikler ve Ekosistem
- **Önceden Oluşturulmuş Kullanıcı Arayüzü Bileşenleri:** Tak ve çalıştır düğmeleri, formlar, modeller ve daha fazlası.
- **Özelleştirilebilir Temalar:** Profesyonel açık/koyu ön ayarlarına sahip çok temalı motor.
- **Yararlı Eklentiler:** Markdown Metin Düzenleyici gibi özel uzantılar.
- **Evrensel Uyumluluk:** Çerçeve agnostik; herhangi bir şablon motoruyla çalışır.

## Meta veriler
- Kütüphane Versiyonu: 2.2.2
- Dokümantasyon sürümü: 2.7.14
- Yığın: Tailwind CSS (Utility-first)
- Toplam Bileşenler: 53
- Uyumluluk: Evrensel / Çerçeve Agnostik
- Örnek Entegrasyonlar: React, Vue, Svelte, Next.js, Laravel, Django, Alpine.js, HTMX
- Lisans: MIT
- Son Güncelleme: 2026-07-13

> **Yapay zeka için not:** Frutjam, W3C standartlarını takip eder ve yalın HTML kullanır. Anlamsal sınıfları kullanın (ör. .btn, .card). Bir Tailwind öneki kullanılıyorsa (örneğin, tw-), bunu Frutjam sınıflarına da uygulayın (örneğin, tw-btn).

### Dokümanlar
Frutjam belgeleri — kurulum, yapılandırma, tema, renkler ve tipografi. Yalnızca CSS'ye özgü Tailwind CSS v4, sıfır JavaScript, WCAG AA'ya erişilebilir. Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.

- [Renkler](https://frutjam.com/tr/docs/colors.md): Frutjam'ın renk sistemi, WCAG AA kontrast oranlarını kutudan çıkar çıkmaz karşılamak üzere tasarlanmış anlamsal CSS belirteçlerini kullanır. JavaScript yok, karanlık mod uyumlu, Tailwind CSS v4 ile uyumlu. Django, HTMX, Laravel ve yalnızca CSS yığınlarıyla çalışır.
- [Genel Bakış](https://frutjam.com/tr/docs/overview.md): Frutjam, yalnızca CSS'ye özel ücretsiz bir Tailwind CSS v4 kullanıcı arayüzü kitaplığıdır. Sıfır JavaScript, WCAG AA/AAA erişilebilir, çerçeveden bağımsız. Django, HTMX, Laravel, React ve herhangi bir yığınla çalışan anlamsal bileşenlerle modern arayüzler oluşturun.
- [Temalar](https://frutjam.com/tr/docs/themes.md): Frutjam'ın yalnızca CSS tema sistemi, CSS değişkenlerini ve tek bir veri özelliğini kullanır. Açık, koyu ve özel temaları JavaScript olmadan değiştirin. Yerleşik WCAG AA renk belirteçleri, Django, HTMX, Laravel ve herhangi bir Tailwind CSS v4 projesiyle çalışır.
- [Kurulum](https://frutjam.com/tr/docs/installation.md): Yalnızca CSS'ye özel Tailwind CSS kullanıcı arayüzü kitaplığı olan Frutjam'ı birkaç dakika içinde yükleyin. İki içe aktarma, sıfır JavaScript, kutudan çıktığı gibi WCAG ile erişilebilen bileşenler. Django, HTMX, Laravel, React ve herhangi bir Tailwind CSS v4 projesiyle çalışır.
- [Yapılandırma](https://frutjam.com/tr/docs/configuration.md): Yalnızca Frutjam CSS'ye özel Tailwind CSS eklentisini yapılandırın. Varsayılan temaları ayarlayın, özel renk belirteçleri tanımlayın, önek sistemini değiştirin; sıfır JavaScript gereklidir. WCAG'ye erişilebilir varsayılanlar, Django, HTMX, Laravel ve herhangi bir çerçeveyle çalışır.
- [Tipografi](https://frutjam.com/tr/docs/typography.md): Frutjam'ın yalnızca CSS tipografi sistemi. Tailwind CSS v4 ile anlamsal HTML metni ölçeklendirme, WCAG'ye erişilebilir, JavaScript gerekmez. Django, HTMX, Laravel, React ve herhangi bir çerçeveyle çalışır.


### Bileşenler
Yerleşik WCAG AA/AAA erişilebilirliğine sahip, yalnızca CSS'ye özel ücretsiz Tailwind CSS bileşenleri. JavaScript gerekmez, çerçeveden bağımsızdır ve Django, HTMX, Laravel, React, Vue ve tüm yığınlarla uyumludur. Kullanıma hazır ve özelleştirilmesi kolaydır.

- [Akordeon](https://frutjam.com/tr/components/accordion.md): Yerel `<detaylar>`/`<summary>` kullanan yalnızca CSS Tailwind CSS akordeonu. İçerik bölümlerini sıfır JavaScript ile genişletin ve daraltın. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Uyarı](https://frutjam.com/tr/components/alert.md): Bilgi, başarı, uyarı ve hata çeşitlerini içeren, yalnızca CSS'ye özgü Tailwind CSS uyarısı. Yumuşak stil, simge yuvası ve kapatılabilir desen. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [avatar](https://frutjam.com/tr/components/avatar.md): Profil resimleri için yalnızca CSS'ye özel Tailwind CSS avatarı. Boyutlar xs-xl, grup yığınlama ve çevrimiçi/çevrimdışı durum göstergesi. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Rozet](https://frutjam.com/tr/components/badge.md): Birincil, ikincil, vurgu, bilgi, başarı, uyarı ve hata çeşitlerini içeren, yalnızca CSS'ye özel Tailwind CSS rozeti. Yumuşak, ana hatlı ve hayalet stiller, xs-lg boyutları. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Ekmek kırıntısı](https://frutjam.com/tr/components/breadcrumb.md): Özel ayırıcılar ve erişilebilir yer işareti işaretlemesi ile yalnızca CSS'ye özel Tailwind CSS içerik haritası navigasyonu. WCAG AA, Django, HTMX, Laravel, React ve herhangi bir Tailwind CSS v4 projesiyle çalışır.
- [Düğme](https://frutjam.com/tr/components/button.md): Birincil, ikincil, vurgulu, hayalet, ana hatlı ve yumuşak değişkenlere sahip, yalnızca CSS'ye özgü Tailwind CSS düğmesi. Boyutlar xs-xl, yükleme durumu, devre dışı ve simge düğmeleri. Yalnızca CSS, WCAG AA, Django, HTMX, Laravel, React ile çalışır.
- [Kart](https://frutjam.com/tr/components/card.md): Anahat, gölge ve düz stillere sahip, yalnızca CSS'ye özgü Tailwind CSS kartı. Kompakt, varsayılan ve büyük boyutlar. Kart içeriği, kart başlığı, kart altbilgi yuvaları. WCAG AA, Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Atlıkarınca](https://frutjam.com/tr/components/carousel.md): Kaydırma-snap'i kullanan yalnızca CSS'ye özgü Tailwind CSS karuseli. Gezinme kontrollerine sahip ve JavaScript gerektirmeyen yatay slayt düzeni. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Sohbet](https://frutjam.com/tr/components/chat.md): Yalnızca CSS'ye özgü Tailwind CSS sohbet balonu bileşeni. Avatar ve zaman damgası yuvalarıyla birlikte gönderilen ve alınan mesajlar için başlangıç ​​ve bitiş konumları. WCAG AA, Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Onay kutusu](https://frutjam.com/tr/components/checkbox.md): Birincil, ikincil, vurgulu ve anlamsal renk çeşitlerine sahip yalnızca CSS Tailwind CSS onay kutusu. Boyutlar xs-xl, belirsiz durum. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Katlanabilir](https://frutjam.com/tr/components/collapsible.md): Yerel "<details>" öğesini kullanan, yalnızca CSS'ye özgü Tailwind CSS daraltılabilir paneli. İçerik bölümlerini JavaScript olmadan gösterin ve gizleyin. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Açılan kutu](https://frutjam.com/tr/components/combobox.md): Canlı arama filtrelemeye ve erişilebilir açılır listeye sahip, yalnızca CSS'ye özel Tailwind CSS açılan kutusu. Klavyede gezinme, renk çeşitleri. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Geri sayım](https://frutjam.com/tr/components/countdown.md): Yalnızca CSS'ye özgü Tailwind CSS geri sayım sayacı. Günler, saatler, dakikalar ve saniyeler için animasyonlu sayı ekranı. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Fark](https://frutjam.com/tr/components/diff.md): Sürüklenebilir bir ayırıcıyla yan yana içerik karşılaştırması için yalnızca CSS Tailwind CSS fark görüntüleyici. JavaScript gerekmez. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Bölücü](https://frutjam.com/tr/components/divider.md): Yalnızca CSS'ye özgü Tailwind CSS bölücü — isteğe bağlı ortalanmış etiketle yatay ve dikey. Renk ve beden çeşitleri. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Çekmece](https://frutjam.com/tr/components/drawer.md): Yerel onay kutusu geçişini kullanan yalnızca CSS Tailwind CSS çekmecesi. JavaScript olmadan gezinme veya filtreler için kaydırmalı yan panel. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Altbilgi](https://frutjam.com/tr/components/footer.md): Çok sütunlu düzen, logo, bağlantılar ve telif hakkı yuvalarına sahip, yalnızca CSS'ye özel Tailwind CSS altbilgisi. WCAG AA'ya erişilebilir, Django, HTMX, Laravel, React ve herhangi bir Tailwind CSS v4 projesiyle çalışır.
- [Başlık](https://frutjam.com/tr/components/header.md): Yalnızca CSS'ye özgü Tailwind CSS sayfa başlığı — marka, gezinme ve eylem yuvalarını içeren üst çubuk düzeni. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Kahraman](https://frutjam.com/tr/components/hero.md): Açılış sayfaları için yalnızca CSS'ye özel Tailwind CSS kahraman bölümü. Ortalanmış başlık, açıklama ve CTA ile tam genişlikte düzen. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Gösterge](https://frutjam.com/tr/components/indicator.md): Rozetlerin veya noktaların herhangi bir öğe köşesine yerleştirilmesi için yalnızca CSS'ye özgü Tailwind CSS göstergesi. Renk çeşitleri ve konumlandırma. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Giriş](https://frutjam.com/tr/components/input.md): Birincil, ikincil, vurgulu ve anlamsal renk çeşitleriyle yalnızca CSS'ye özgü Tailwind CSS girişi. Boyutları xs-xl, önek ve sonek eklenti yuvaları, hayalet tarzı. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Katılmak](https://frutjam.com/tr/components/join.md): Yalnızca CSS'ye özgü Tailwind Düğmeleri, girişleri veya seçimleri bağlı bir ünitede gruplamak için CSS birleşimi. Yatay ve dikey. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [KBD](https://frutjam.com/tr/components/kbd.md): Klavye kısayollarını ve tuş birleşimlerini görüntülemek için yalnızca CSS'ye özgü Tailwind CSS kbd bileşeni. Boyut çeşitleri. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Bağlantı](https://frutjam.com/tr/components/link.md): Birincil, ikincil, vurgulu ve nötr renk çeşitleriyle yalnızca CSS'ye özgü Tailwind CSS bağlantısı. Altı çizili ve düz stilleri vurgulayın. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Yükleniyor](https://frutjam.com/tr/components/loading.md): Döndürücü, noktalar, halka ve çubuk animasyonlarıyla yalnızca CSS'ye özgü Tailwind CSS yükleme göstergesi. Renk ve boyut çeşitleri, JavaScript gerekmez. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Seçim Çerçevesi](https://frutjam.com/tr/components/marquee.md): Yatay olarak kaydırılan içerik ve logolar için yalnızca CSS'ye özel Tailwind CSS çerçevesi. CSS üzerinden hız ve yön kontrolü, JavaScript yok. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Maske](https://frutjam.com/tr/components/mask.md): Görüntüleri daire, sincap, kalp, altıgen ve daha fazlası gibi şekillere kırpmak için yalnızca CSS'ye özel Tailwind CSS maskesi. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Menü](https://frutjam.com/tr/components/menu.md): Gezinme listeleri için yalnızca CSS Tailwind CSS dikey menüsü. Etkin, devre dışı ve simge öğesi durumları. Boyut çeşitleri. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Modal](https://frutjam.com/tr/components/modal.md): Yerel "<dialog>" öğesini kullanan yalnızca CSS Tailwind CSS modeli. Duyarlı boyutlandırma, arka plan ve odaklama tuzağı. Temel kullanım için JavaScript yok. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Gezinme çubuğu](https://frutjam.com/tr/components/navbar.md): Markaya, gezinme bağlantılarına ve eylem yuvalarına sahip, yalnızca CSS'ye özel Tailwind CSS gezinme çubuğu. Yapışkan ve şeffaf çeşitleri. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Sayfalandırma](https://frutjam.com/tr/components/pagination.md): Numaralandırılmış sayfalar, önceki/sonraki oklar, üç nokta boşlukları, erişilebilir radyo girişleri ve sayfa atlama seçimi için yalnızca CSS'ye özgü Tailwind CSS sayfalandırması. JavaScript gerekmez. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Popover](https://frutjam.com/tr/components/popover.md): Yerel açılır API'yi kullanan, yalnızca CSS'ye özgü Tailwind CSS açılır penceresi. Araç ipuçları ve açılır menüler için kayan içerik paneli. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [İlerlemek](https://frutjam.com/tr/components/progress.md): Birincil, ikincil, vurgulu ve anlamsal renk çeşitlerine sahip yalnızca CSS Tailwind CSS ilerleme çubuğu. Boyutlar xs-xl. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Radyal İlerleme](https://frutjam.com/tr/components/radial-progress.md): Yalnızca CSS'de Tailwind CSS radyal ilerlemesi — yüzde göstergeli dairesel ilerleme halkası. Renk ve boyut çeşitleri, JavaScript yok. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Radyo](https://frutjam.com/tr/components/radio.md): Birincil, ikincil, vurgulu ve anlamsal renk çeşitlerine sahip, yalnızca CSS'ye özgü Tailwind CSS radyo düğmeleri. Boyutlar xs-xl. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Menzil](https://frutjam.com/tr/components/range.md): Birincil, ikincil, vurgulu ve anlamsal renk çeşitlerine sahip, yalnızca CSS'ye özgü Tailwind CSS aralığı kaydırıcısı. Boyutlar xs-xl. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Derecelendirme](https://frutjam.com/tr/components/rating.md): Yalnızca CSS'ye özgü Tailwind CSS yıldızı ve kalp derecelendirme bileşeni. Boyutlar xs-xl, yarım yıldız desteği, JavaScript gerekmez. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Seçme](https://frutjam.com/tr/components/select.md): Yalnızca CSS'ye özgü Tailwind Birincil, ikincil, vurgulu ve anlamsal renk çeşitleriyle CSS seçme açılır menüsü. Boyutları xs-xl, hayalet tarzı. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Kenar çubuğu](https://frutjam.com/tr/components/sidebar.md): Yan gezinme panelleri için yalnızca CSS'ye özgü Tailwind CSS kenar çubuğu. Gezinme öğesi durumları ve bölüm başlıkları ile daraltılabilir. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [İskelet](https://frutjam.com/tr/components/skeleton.md): Yer tutucu kullanıcı arayüzü için yalnızca CSS Tailwind CSS iskelet yükleyicisi. Darbe animasyonlu daire, dikdörtgen ve metin çizgisi şekilleri. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [İstatistik](https://frutjam.com/tr/components/stat.md): Metrikleri görüntülemek için yalnızca CSS'ye özgü Tailwind CSS istatistiği. Değer, etiket, açıklama ve simge yuvaları. Duyarlı ızgara düzeni. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Durum](https://frutjam.com/tr/components/status.md): Birincil, başarı, uyarı ve hata renk çeşitleriyle yalnızca CSS Tailwind CSS durum nokta göstergesi. Boyutlar xs-xl. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Adımlar](https://frutjam.com/tr/components/steps.md): Çok adımlı sihirbazlar ve ilerleme göstergeleri için yalnızca CSS Tailwind CSS adımları. Yatay ve dikey düzen, adım başına renk çeşitleri. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Yüzey](https://frutjam.com/tr/components/surface.md): Temalı arka plan ve metin renklerini bir kaba uygulamak için yalnızca CSS'ye özgü Tailwind CSS yüzeyi. Tüm renk çeşitleri. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Takas](https://frutjam.com/tr/components/swap.md): Yalnızca CSS'ye özgü Tailwind İki öğe arasında geçiş yapmak için CSS takası. Animasyonları çevirin, döndürün ve soluklaştırın; JavaScript yok. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Masa](https://frutjam.com/tr/components/table.md): Zebra şeritli, kompakt ve varsayılan boyutlara, sabitlenmiş sütunlara ve satır vurgulu durumlarına sahip, yalnızca CSS'den oluşan Tailwind CSS tablosu. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Sekmeler](https://frutjam.com/tr/components/tabs.md): Kenarlıklı, kaldırılmış, kutulu ve hap stili çeşitlerine sahip, yalnızca CSS'ye özgü Tailwind CSS sekmeleri. Etkin durum ve boyutlar, JavaScript gerekmez. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Etiket](https://frutjam.com/tr/components/tag.md): Renk çeşitleri, yumuşak stil ve çıkarılabilir düğmeyle yalnızca CSS'ye özgü Tailwind CSS etiketi (çip). Boyutlar xs-lg. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Metin alanı](https://frutjam.com/tr/components/textarea.md): Birincil, ikincil, vurgulu ve anlamsal renk çeşitlerine sahip, yalnızca CSS'ye özgü Tailwind CSS metin alanı. Boyutları xs-xl, hayalet tarzı. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Zaman çizelgesi](https://frutjam.com/tr/components/timeline.md): Kronolojik olay listeleri için yalnızca CSS'ye özgü Tailwind CSS zaman çizelgesi. Simge, içerik ve bağlayıcı çizgi yuvalarına sahip dikey düzen. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Tost](https://frutjam.com/tr/components/toast.md): Bildirim konumlandırma için yalnızca CSS Tailwind CSS tostu - üst, alt, başlangıç, bitiş ve orta yerleşim. Düzen için JavaScript yok. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Değiştir](https://frutjam.com/tr/components/toggle.md): Yalnızca CSS'ye özgü Tailwind Birincil, ikincil, vurgulu ve anlamsal renk çeşitleriyle CSS geçiş anahtarı. Boyutlar xs-xl. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [İpucu](https://frutjam.com/tr/components/tooltip.md): Üst, alt, sol ve sağ yerleşime sahip, yalnızca CSS'ye özel Tailwind CSS araç ipucu. Renk çeşitleri, JavaScript gerekmez. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.


### Bloklar
Yalnızca CSS'ye özgü Tailwind CSS kullanıcı arayüzü blokları ve bölümleri. JavaScript yok, WCAG AA erişilebilir, çerçeveden bağımsız. Kahramanları, başlıkları, fiyatlandırma bölümlerini ve özellik bloklarını kopyalayıp yapıştırın. Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.

- [Başlık](https://frutjam.com/tr/blocks/header.md): Gezinme çubuğu, markalama ve mobil çekmece içeren, yalnızca CSS'ye özel Tailwind CSS başlık blokları. Yapışkan, şeffaf ve duyarlı düzen çeşitleri. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Kahraman](https://frutjam.com/tr/blocks/hero.md): Yalnızca CSS'ye özgü Tailwind CSS kahraman blokları — ortalanmış, bölünmüş ve resim düzenlerine sahip hazır açılış sayfası bölümleri. JavaScript gerekmez, WCAG AA'ya erişilebilir. Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
- [Fiyatlandırma](https://frutjam.com/tr/blocks/pricing.md): Kart ve düğme bileşenleriyle oluşturulmuş yalnızca CSS Tailwind CSS fiyatlandırma blokları. Katmanları, özellik listelerini ve CTA'ları içeren fiyatlandırma tablolarını kopyalayıp yapıştırın. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.


### Eklentiler
Frutjam'i yalnızca CSS'ye özel Tailwind CSS eklentileriyle genişletin. Sıfır JavaScript, WCAG erişilebilir, çerçeveden bağımsız. Django, HTMX, Laravel ve herhangi bir çerçeveyle çalışır.

- [İşaretleme Düzenleyicisi](https://frutjam.com/tr/plugins/markdown-editor.md): Yerel bir metin alanını tam bir düzenleme paketine dönüştüren Markdown metin düzenleyici eklentisi; senkronizasyon gerekmez. WYSIWYG ve düz Markdown modları, canlı önizleme, bul ve değiştir, RTL desteği, karanlık mod. Django, Laravel, Rails, Node.js, PHP ve herhangi bir yığınla çalışır.