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.
Frutjam, Tailwind CSS v4 için oluşturulmuş 52'den fazla yalnızca CSS'ye özel Tailwind CSS bileşeni (düğmeler, modeller, formlar, gezinme, veri görüntüleme ve daha fazlası) sunar. Her bileşen, herhangi bir Tailwind yardımcı program sınıfıyla birlikte çalışan anlamsal sınıf adlarını (.btn, .card, .badge) kullanır. Hiçbir JavaScript paketlenmez, React bağlamı gerekmez ve Tailwind dışında hiçbir PostCSS eklentisine gerek yoktur. Her bileşene, her yüzeyde okunabilir kontrastı garanti eden elle ayarlanmış OKLCH renk çiftleriyle, kutudan çıktığı haliyle WCAG AA'ya erişilebilir. Frutjam yalnızca CSS ve çerçeveden bağımsız olduğundan, aynı HTML işaretlemesi Django şablonlarında, HTMX yanıtlarında, Laravel Blade'de, Rails ERB'de, React JSX'te veya düz statik HTML'de değişiklik yapılmadan çalışır.
Frutjam'da yeni misiniz?
Saniyeler içinde başlayın; iki içe aktarma ve oluşturmaya hazırsınız.
Akordeon
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ı
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
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
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ı
Ö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
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
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
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
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
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
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
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
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
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ü
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
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
Ç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
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
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
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ş
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
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
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ı
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
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
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
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ü
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Ç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
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
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
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
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
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ı
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
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
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
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
Ü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.
Sık sorulan sorular
Tüm Frutjam bileşenleri yalnızca CSS'den mi oluşuyor?
Evet — bileşenlerin büyük çoğunluğu sıfır JavaScript içeren saf CSS'dir. Düğmeler, rozetler, kartlar, formlar, uyarılar, modeller, çekmeceler, sekmeler ve daha fazlasının tümü düz HTML ve CSS ile çalışır. Yerel HTML eşdeğeri olmayan az sayıda bileşen (kızartma konumlandırma, açılan kutu filtreleme, atlıkarınca kontrolleri) isteğe bağlı hafif JS yardımcıları sunar, ancak CSS düzeni ve stili hiçbir JavaScript gerektirmez.
Frutjam bileşenleri Django, HTMX ve Laravel ile çalışır mı?
Evet - Frutjam çerçeveden bağımsızdır. Her bileşen yalnızca CSS olduğundan, sunucu tarafından oluşturulan herhangi bir yığınla çalışır. Django şablonları, HTMX, Laravel Blade, Rails ERB, düz HTML — HTML çıktısı alabiliyorsanız Frutjam çalışır. React yok, derleme hattı yok, JavaScript çerçevesi gerekli değil.
WCAG bileşenlerine erişilebilir mi?
Evet — WCAG AA kontrastı her bileşende garanti edilir. Her renk çifti (--color-primary / --color-on-primary, vb.), WCAG AA kontrast gereksinimlerini karşılamak için OKLCH'de elle ayarlanmıştır. Semantik HTML öğeleri baştan sona kullanılır; modeller için yerel <dialog>, akordeonlar için <details> ve gerektiğinde uygun ARIA nitelikleri.
Frutjam bileşenleri DaisyUI ile nasıl karşılaştırılır?
Her ikisi de yalnızca CSS'ye özgü Tailwind CSS bileşen kitaplıklarıdır, ancak Frutjam özel olarak Tailwind CSS v4 için oluşturulmuştur, garantili WCAG AA kontrast çiftleriyle OKLCH renk belirteçlerini kullanır ve AI düzenleyici entegrasyonu için ücretsiz bir MCP sunucusu (Cherry) gönderir - DaisyUI'nin eşdeğeri (Blueprint) ücretlidir. Frutjam ayrıca çalışma zamanında ön plan renklerini hesaplamak yerine açık {color} belirteç çiftleri sağlar.
Tailwind CSS'den başka bir şey yüklemem gerekiyor mu?
Sadece bir ekstra satır. @import "tailwindcss";'den sonra CSS dosyanıza @plugin "frutjam"; ekleyin ve npm i -D frutjam aracılığıyla yükleyin. İşte bu; PostCSS eklentisi yok, JavaScript yapılandırması yok, içe aktarılacak ayrı bir stil sayfası yok. Tüm bileşenler hemen kullanıma hazırdır ve Tailwind tarafından otomatik olarak sarsılır.
Frutjam bileşenlerini React veya Next.js ile kullanabilir miyim?
Evet. Frutjam yalnızca CSS olduğundan, bileşenleri herhangi bir yığında aynı şekilde kullanırsınız; yalnızca sınıf adlarını uygulamanız yeterlidir. Frutjam, JavaScript kontrolünden yararlanan birkaç bileşen için (modal açma/kapama, tost, atlıkarınca), yerel DOM çağrılarını hiçbir ekstra bağımlılık olmadan saran isteğe bağlı React kancaları (frutjam/react) sunar.