Blok dan Bagian UI - Bangun Lebih Cepat
Blok dan bagian UI Tailwind CSS khusus CSS. Tanpa JavaScript, WCAG AA dapat diakses, tanpa kerangka kerja. Salin-tempel pahlawan, tajuk, bagian harga, dan blok fitur. Bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Blok adalah bagian halaman siap produksi yang dirakit dari komponen Frutjam. Setiap blok adalah HTMX mandiri — masukkan ke dalam template Django, file Laravel Blade, halaman HTMX, atau komponen React mana pun dan itu langsung berfungsi. Blok mewarisi tema Frutjam aktif Anda secara otomatis, jadi beralih antara tema terang, gelap, atau khusus tidak memerlukan perubahan pada HTMX blok. Semua blok hanya untuk CSS, dapat diakses oleh WCAG AA, dan dibuat untuk Tailwind CSS v4 — tanpa JavaScript, tidak ada pipeline build selain Tailwind itu sendiri.
Tajuk
Blok header CSS Tailwind khusus CSS dengan bilah navigasi, pencitraan merek, dan laci seluler. Varian tata letak yang lengket, transparan, dan responsif. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Pahlawan
Blok pahlawan CSS Tailwind khusus CSS — bagian laman landas siap pakai dengan tata letak tengah, terpisah, dan gambar. Tidak diperlukan JavaScript, WCAG AA dapat diakses. Bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Harga
Blok harga Tailwind CSS khusus CSS yang dibuat dengan komponen kartu dan tombol. Salin-tempel tabel harga dengan tingkatan, daftar fitur, dan CTA. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Apa itu blok?
Blok adalah bagian halaman siap pakai yang lebih besar yang dibuat dengan menyusun komponen Frutjam bersama-sama. Jika komponen adalah elemen UI tunggal (tombol, kartu, lencana), blok adalah bagian tata letak yang lengkap — pahlawan, tabel harga, header situs — siap untuk disalin dan ditempel ke proyek Anda.
Khusus CSS
Setiap blok dibuat dengan komponen Frutjam dan utilitas Tailwind CSS — tanpa JavaScript, tanpa ketergantungan tambahan.
Salin-tempel sudah siap
Setiap blok adalah HTMX mandiri. Tempelkan ke templat Django, Laravel Blade, halaman HTMX, atau komponen React apa pun.
Sadar tema
Blok mewarisi tema Frutjam aktif Anda secara otomatis — ganti tema dan semua blok diperbarui tanpa perlu perubahan.
Apa perbedaan antara blok dan komponen?
Komponen adalah satu elemen UI yang dapat digunakan kembali — tombol, kartu, lencana. Blok adalah bagian halaman lengkap yang menyusun beberapa komponen ke dalam tata letak — bagian pahlawan, tabel harga, header situs dengan bilah navigasi dan laci seluler. Gunakan komponen untuk membuat tata letak khusus; gunakan blok untuk perakitan halaman cepat.
Apakah blok berfungsi dengan Django, HTMX, dan Laravel?
Ya — blok adalah HTMX biasa yang menggunakan kelas komponen Frutjam. Mereka bekerja di sistem templating apa pun: Django, HTMX, Laravel Blade, Rails ERB, Jinja2, atau HTMX statis. Tidak ada kerangka kerja JavaScript, tidak ada langkah pembangunan selain Tailwind CSS itu sendiri.
Apakah lebih banyak blok yang ditambahkan?
Ya — blok baru ditambahkan secara berkala. Paket Pro dan Tim mencakup akses ke blok premium termasuk bagian fitur, testimonial, CTA, dan templat halaman penuh.