Komponen
Komponen Tailwind CSS khusus CSS gratis dengan aksesibilitas WCAG AA/AAA bawaan. Tidak diperlukan JavaScript, kerangka-agnostik, dan kompatibel dengan Django, HTMX, Laravel, React, Vue, dan tumpukan apa pun. Siap digunakan dan mudah disesuaikan.
Frutjam mengirimkan 52+ komponen Tailwind CSS khusus CSS — tombol, modals, formulir, navigasi, tampilan data, dan banyak lagi — yang dibuat untuk Tailwind CSS v4. Setiap komponen menggunakan nama kelas semantik (.btn, .card, .badge) yang berfungsi bersama kelas utilitas Tailwind mana pun. Tidak ada JavaScript yang dibundel, tidak diperlukan konteks React, dan tidak diperlukan plugin PostCSS selain Tailwind itu sendiri. Setiap komponen adalah WCAG AA yang dapat langsung diakses, dengan pasangan warna OKLCH yang disesuaikan secara manual yang menjamin kontras yang dapat dibaca di setiap permukaan. Karena Frutjam hanya CSS dan kerangka-agnostik, markup HTMX yang sama bekerja di templat Django, respons HTMX, Laravel Blade, Rails ERB, React JSX, atau HTMX statis biasa — tanpa modifikasi.
Baru mengenal Frutjam?
Mulailah dalam hitungan detik — dua kali impor dan Anda siap membangun.
Akordeon
Akordeon Tailwind CSS khusus CSS menggunakan `<details>`/`<summary>` asli. Perluas dan ciutkan bagian konten tanpa JavaScript. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Peringatan
Peringatan Tailwind CSS khusus CSS dengan varian info, keberhasilan, peringatan, dan kesalahan. Gaya lembut, slot ikon, dan pola yang dapat diabaikan. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Avatar
Avatar Tailwind CSS khusus CSS untuk gambar profil. Ukuran xs-xl, susunan grup, dan indikator status online/offline. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Lencana
Lencana Tailwind CSS khusus CSS dengan varian primer, sekunder, aksen, info, sukses, peringatan, dan kesalahan. Gaya lembut, garis besar, dan hantu, ukuran xs-lg. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Remah roti
Navigasi runut tautan CSS Tailwind khusus CSS dengan pemisah khusus dan markup landmark yang dapat diakses. WCAG AA, bekerja dengan Django, HTMX, Laravel, React, dan proyek Tailwind CSS v4 apa pun.
Tombol
Tombol Tailwind CSS khusus CSS dengan varian primer, sekunder, aksen, bayangan, kerangka, dan lembut. Ukuran xs-xl, status pemuatan, nonaktif, dan tombol ikon. Khusus CSS, WCAG AA, bekerja dengan Django, HTMX, Laravel, React.
Kartu
Kartu CSS Tailwind khusus CSS dengan gaya kerangka, bayangan, dan datar. Ukuran ringkas, standar, dan besar. Isi kartu, judul kartu, slot kaki kartu. WCAG AA, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Korsel
Korsel Tailwind CSS khusus CSS menggunakan scroll-snap. Tata letak slide horizontal dengan kontrol navigasi dan tidak memerlukan JavaScript. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Mengobrol
Komponen gelembung obrolan Tailwind CSS khusus CSS. Posisi awal dan akhir untuk pesan yang dikirim dan diterima, dengan slot avatar dan stempel waktu. WCAG AA, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
kotak centang
Kotak centang Tailwind CSS khusus CSS dengan varian warna primer, sekunder, aksen, dan semantik. Ukuran XS-XL, keadaan tidak menentu. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Dapat dilipat
Panel Tailwind CSS khusus CSS yang dapat diciutkan menggunakan elemen `<details>` asli. Tampilkan dan sembunyikan bagian konten tanpa JavaScript. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
kotak kombo
Kotak kombo Tailwind CSS khusus CSS dengan pemfilteran penelusuran langsung dan daftar tarik-turun yang dapat diakses. Navigasi keyboard, varian warna. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Hitung mundur
Penghitung waktu mundur CSS Tailwind khusus CSS. Tampilan angka animasi untuk hari, jam, menit, dan detik. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Beda
Tailwind CSS diff viewer khusus CSS untuk perbandingan konten berdampingan dengan pembatas yang dapat diseret. Tidak diperlukan JavaScript. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Pembagi
Pembagi CSS Tailwind khusus CSS — horizontal dan vertikal dengan label opsional di tengah. Varian warna dan ukuran. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Laci
Laci CSS Tailwind khusus CSS menggunakan pengalih kotak centang asli. Panel samping geser untuk navigasi atau filter tanpa JavaScript. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
catatan kaki
Footer Tailwind CSS khusus CSS dengan tata letak multi-kolom, logo, tautan, dan slot hak cipta. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan proyek Tailwind CSS v4 apa pun.
Tajuk
Header halaman Tailwind CSS khusus CSS — tata letak bilah atas dengan slot merek, navigasi, dan tindakan. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Pahlawan
Bagian pahlawan CSS Tailwind khusus CSS untuk laman landas. Tata letak lebar penuh dengan judul, deskripsi, dan CTA di tengah. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Indikator
Indikator Tailwind CSS khusus CSS untuk melapisi lencana atau titik di sudut elemen mana pun. Varian warna dan posisi. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Masukan
Input Tailwind CSS khusus CSS dengan varian warna primer, sekunder, aksen, dan semantik. Ukuran xs-xl, slot tambahan awalan dan akhiran, gaya hantu. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Bergabung
Tailwind CSS khusus CSS bergabung untuk mengelompokkan tombol, masukan, atau pilihan ke dalam unit yang terhubung. Horisontal dan vertikal. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
KBD
Komponen kbd CSS Tailwind khusus CSS untuk menampilkan pintasan keyboard dan kombinasi tombol. Varian ukuran. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Link
Tautan CSS Tailwind khusus CSS dengan varian warna primer, sekunder, aksen, dan netral. Arahkan kursor ke garis bawah dan gaya polos. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Memuat
Indikator pemuatan CSS Tailwind khusus CSS dengan animasi spinner, titik, cincin, dan batang. Varian warna dan ukuran, tidak diperlukan JavaScript. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Tenda
Tenda CSS Tailwind khusus CSS untuk menggulir konten dan logo secara horizontal. Kontrol kecepatan dan arah melalui CSS, tanpa JavaScript. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Masker
Tailwind CSS mask khusus CSS untuk memotong gambar menjadi bentuk — lingkaran, tupai, hati, segi enam, dan banyak lagi. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Menu
Menu vertikal Tailwind CSS khusus CSS untuk daftar navigasi. Status item aktif, nonaktif, dan ikon. Varian ukuran. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Modal
Modal CSS Tailwind khusus CSS yang menggunakan elemen `<dialog>` asli. Ukuran responsif, latar belakang, dan perangkap fokus. Tidak ada JavaScript untuk penggunaan dasar. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
bilah navigasi
Bilah navigasi CSS Tailwind khusus CSS dengan merek, tautan navigasi, dan slot tindakan. Varian lengket dan transparan. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Paginasi
Penomoran halaman CSS Tailwind khusus CSS untuk halaman bernomor, panah sebelum/berikutnya, celah elipsis, input radio yang dapat diakses, dan pilihan lompat halaman. Tidak diperlukan JavaScript. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Popover
Popover CSS Tailwind khusus CSS menggunakan API popover asli. Panel konten mengambang untuk tooltip dan dropdown. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Kemajuan
Bilah kemajuan CSS Tailwind khusus CSS dengan varian warna primer, sekunder, aksen, dan semantik. Ukuran XS-XL. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Kemajuan Radial
Kemajuan radial CSS Tailwind khusus CSS — lingkaran kemajuan melingkar dengan tampilan persentase. Varian warna dan ukuran, tanpa JavaScript. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Radio
Tombol radio Tailwind CSS khusus CSS dengan varian warna primer, sekunder, aksen, dan semantik. Ukuran XS-XL. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Jangkauan
Penggeser rentang Tailwind CSS khusus CSS dengan varian warna primer, sekunder, aksen, dan semantik. Ukuran XS-XL. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Peringkat
Komponen bintang dan rating hati Tailwind CSS khusus CSS. Ukuran xs-xl, dukungan setengah bintang, tidak memerlukan JavaScript. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Memilih
Dropdown pilihan Tailwind CSS khusus CSS dengan varian warna primer, sekunder, aksen, dan semantik. Ukuran xs-xl, model hantu. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Bilah samping
Sidebar CSS Tailwind khusus CSS untuk panel navigasi samping. Dapat dilipat, dengan status item navigasi dan judul bagian. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Kerangka
Pemuat kerangka Tailwind CSS khusus CSS untuk UI placeholder. Bentuk lingkaran, persegi panjang, dan garis teks dengan animasi pulsa. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Statistik
Statistik Tailwind CSS khusus CSS untuk menampilkan metrik. Slot nilai, label, deskripsi, dan ikon. Tata letak grid responsif. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Status
Indikator titik status Tailwind CSS khusus CSS dengan varian warna utama, sukses, peringatan, dan kesalahan. Ukuran XS-XL. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Tangga
Langkah-langkah Tailwind CSS khusus CSS untuk panduan multi-langkah dan indikator kemajuan. Tata letak horizontal dan vertikal, varian warna per langkah. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Permukaan
Permukaan CSS Tailwind khusus CSS untuk menerapkan latar belakang bertema dan warna teks ke wadah. Semua varian warna. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Menukar
Pertukaran CSS Tailwind khusus CSS untuk beralih di antara dua elemen. Balik, putar, dan pudarkan animasi, tanpa JavaScript. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Meja
Tabel Tailwind CSS khusus CSS dengan garis zebra, ukuran ringkas dan default, kolom yang dipasangi pin, dan status hover baris. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
tab
Tab Tailwind CSS khusus CSS dengan varian gaya tepi, terangkat, kotak, dan pil. Status dan ukuran aktif, tidak diperlukan JavaScript. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Menandai
Tag (chip) Tailwind CSS khusus CSS dengan varian warna, gaya lembut, dan tombol yang dapat dilepas. Ukuran XS-LG. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Area teks
Textarea Tailwind CSS khusus CSS dengan varian warna primer, sekunder, aksen, dan semantik. Ukuran xs-xl, model hantu. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Garis Waktu
Garis waktu Tailwind CSS khusus CSS untuk daftar peristiwa kronologis. Tata letak vertikal dengan ikon, konten, dan slot baris konektor. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Roti panggang
Tailwind CSS khusus CSS untuk pemosisian notifikasi — penempatan atas, bawah, awal, akhir, dan tengah. Tidak ada JavaScript untuk tata letak. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Beralih
Sakelar pengalih Tailwind CSS khusus CSS dengan varian warna primer, sekunder, aksen, dan semantik. Ukuran XS-XL. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Keterangan alat
Tooltip Tailwind CSS khusus CSS dengan penempatan atas, bawah, kiri, dan kanan. Varian warna, tidak diperlukan JavaScript. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Pertanyaan yang sering diajukan
Apakah semua komponen Frutjam hanya untuk CSS?
Ya — sebagian besar komponennya adalah CSS murni tanpa JavaScript. Tombol, lencana, kartu, formulir, peringatan, modals, laci, tab, dan lainnya semuanya berfungsi dengan HTML dan CSS biasa. Sejumlah kecil komponen yang tidak memiliki padanan HTML asli (pemosisian roti panggang, pemfilteran kotak kombo, kontrol carousel) menawarkan pembantu JS ringan opsional, namun tata letak dan gaya CSS tidak memerlukan JavaScript sama sekali.
Apakah komponen Frutjam bekerja dengan Django, HTMX, dan Laravel?
Ya - Frutjam adalah kerangka-agnostik. Karena setiap komponen hanya untuk CSS, ia berfungsi dengan tumpukan apa pun yang dirender oleh server. Templat Django, HTMX, Laravel Blade, Rails ERB, HTMX biasa — jika Anda dapat menampilkan HTMX, Frutjam berfungsi. Tidak ada React, tidak ada pipeline build, tidak diperlukan framework JavaScript.
Apakah komponen WCAG dapat diakses?
Ya — Kontras WCAG AA dijamin pada setiap komponen. Setiap pasangan warna (--color-primary / --color-on-primary, dll.) disetel secara manual di OKLCH untuk memenuhi persyaratan kontras WCAG AA. Elemen HTML semantik digunakan di seluruh bagian — <dialog> asli untuk modals, <details> untuk akordeon, dan atribut ARIA yang sesuai jika diperlukan.
Bagaimana komponen Frutjam dibandingkan dengan DaisyUI?
Keduanya merupakan pustaka komponen Tailwind CSS khusus CSS, namun Frutjam dibuat khusus untuk Tailwind CSS v4, menggunakan token warna OKLCH dengan jaminan pasangan kontras WCAG AA, dan mengirimkan server MCP gratis (Cherry) untuk integrasi editor AI — yang setara dengan DaisyUI (Cetak Biru) berbayar. Frutjam juga menyediakan pasangan token on-{color} secara eksplisit daripada menghitung warna latar depan saat runtime.
Apakah saya perlu menginstal apa pun selain Tailwind CSS?
Hanya satu baris tambahan. Tambahkan @plugin "frutjam"; ke file CSS Anda setelah @import "tailwindcss"; dan instal melalui npm i -D frutjam. Itu saja — tidak ada plugin PostCSS, tidak ada konfigurasi JavaScript, tidak ada stylesheet terpisah untuk diimpor. Semua komponen segera tersedia dan diguncang secara otomatis oleh Tailwind.
Bisakah saya menggunakan komponen Frutjam dengan React atau Next.js?
Ya. Karena Frutjam hanya untuk CSS, Anda menggunakan komponen dengan cara yang sama di tumpukan mana pun — cukup terapkan nama kelasnya. Untuk beberapa komponen yang mendapatkan keuntungan dari kontrol JavaScript (modal open/close, toast, carousel), Frutjam mengirimkan React hooks opsional (frutjam/react) yang membungkus panggilan DOM asli tanpa ketergantungan tambahan.