# Frutjam UI Library A standards-first UI system. Optimized for Accessibility, SEO, and Performance. ## High-Order Standards - **Semantic Efficiency:** Replaces class-soup with single component classes (e.g., .btn). - **Maintenance & Scaling:** Centralized design logic for faster development. - **Developer Experience:** Supports Tailwind-style prefixing (e.g., tw-btn). - **WCAG Color Contrast:** All components pass AA/AAA ratios out of the box. - **W3C Validated:** Strictly compliant, clean HTML5 structure. - **Accessibility (A11y):** Keyboard navigation and ARIA patterns baked-in. - **SEO & Semantics:** Meaningful HTML elements for search engine dominance. - **DOM Efficiency:** Optimized to reduce node depth and rendering lag. ## Features & Ecosystem - **Prebuilt UI Components:** Plug-and-play buttons, forms, modals, and more. - **Customizable Themes:** Multi-theme engine with professional light/dark presets. - **Useful Plugins:** Specialized extensions like a Markdown Text Editor. - **Universal Compatibility:** Framework agnostic; works with any template engine. ## Metadata - Library Version: 2.2.2 - Documentation version: 2.7.14 - Stack: Tailwind CSS (Utility-first) - Total Components: 53 - Compatibility: Universal / Framework Agnostic - Example Integrations: React, Vue, Svelte, Next.js, Laravel, Django, Alpine.js, HTMX - Lisensi: MIT - Last Updated: 2026-07-13 > **Note for AI:** Frutjam follows W3C standards and uses lean HTML. Use semantic classes (e.g., .btn, .card). If a Tailwind prefix is used (e.g., tw-), apply it to Frutjam classes as well (e.g., tw-btn). ### dokumen Dokumentasi Frutjam — instalasi, konfigurasi, tema, warna, dan tipografi. Tailwind CSS v4 khusus CSS, tanpa JavaScript, WCAG AA dapat diakses. Bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun. - [Warna](https://frutjam.com/id/docs/colors.md): Sistem warna Frutjam menggunakan token CSS semantik yang dirancang untuk memenuhi rasio kontras WCAG AA yang siap pakai. Tanpa JavaScript, mendukung mode gelap, kompatibel dengan Tailwind CSS v4. Bekerja dengan Django, HTMX, Laravel, dan tumpukan khusus CSS apa pun. - [Ringkasan](https://frutjam.com/id/docs/overview.md): Frutjam adalah pustaka UI Tailwind CSS v4 UI gratis khusus CSS. Tanpa JavaScript, WCAG AA/AAA dapat diakses, tanpa kerangka kerja. Bangun antarmuka modern dengan komponen semantik yang bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun. - [Tema](https://frutjam.com/id/docs/themes.md): Sistem tema khusus CSS Frutjam menggunakan variabel CSS dan atribut data tunggal. Ganti tema terang, gelap, dan khusus tanpa JavaScript. Token warna WCAG AA bawaan, berfungsi dengan Django, HTMX, Laravel, dan proyek Tailwind CSS v4 apa pun. - [Instalasi](https://frutjam.com/id/docs/installation.md): Instal Frutjam, pustaka Tailwind CSS UI khusus CSS, dalam hitungan menit. Dua impor, tanpa JavaScript, komponen yang dapat diakses WCAG secara langsung. Bekerja dengan Django, HTMX, Laravel, React, dan proyek Tailwind CSS v4 apa pun. - [Konfigurasi](https://frutjam.com/id/docs/configuration.md): Konfigurasikan plugin Tailwind CSS khusus Frutjam CSS. Tetapkan tema default, tentukan token warna khusus, alihkan sistem awalan - tidak diperlukan JavaScript. Default WCAG dapat diakses, bekerja dengan Django, HTMX, Laravel, dan kerangka kerja apa pun. - [Tipografi](https://frutjam.com/id/docs/typography.md): Sistem tipografi khusus CSS Frutjam. Penskalaan teks HTMX semantik dengan Tailwind CSS v4, dapat diakses WCAG, tidak memerlukan JavaScript. Bekerja dengan Django, HTMX, Laravel, React, dan kerangka kerja apa pun. ### 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. - [Akordeon](https://frutjam.com/id/components/accordion.md): Akordeon Tailwind CSS khusus CSS menggunakan `
`/`` asli. Perluas dan ciutkan bagian konten tanpa JavaScript. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun. - [Peringatan](https://frutjam.com/id/components/alert.md): 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](https://frutjam.com/id/components/avatar.md): 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](https://frutjam.com/id/components/badge.md): 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](https://frutjam.com/id/components/breadcrumb.md): 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](https://frutjam.com/id/components/button.md): 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](https://frutjam.com/id/components/card.md): 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](https://frutjam.com/id/components/carousel.md): 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](https://frutjam.com/id/components/chat.md): 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](https://frutjam.com/id/components/checkbox.md): 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](https://frutjam.com/id/components/collapsible.md): Panel Tailwind CSS khusus CSS yang dapat diciutkan menggunakan elemen `
` asli. Tampilkan dan sembunyikan bagian konten tanpa JavaScript. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun. - [kotak kombo](https://frutjam.com/id/components/combobox.md): 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](https://frutjam.com/id/components/countdown.md): 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](https://frutjam.com/id/components/diff.md): 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](https://frutjam.com/id/components/divider.md): 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](https://frutjam.com/id/components/drawer.md): 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](https://frutjam.com/id/components/footer.md): 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](https://frutjam.com/id/components/header.md): 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](https://frutjam.com/id/components/hero.md): 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](https://frutjam.com/id/components/indicator.md): 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](https://frutjam.com/id/components/input.md): 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](https://frutjam.com/id/components/join.md): 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](https://frutjam.com/id/components/kbd.md): 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](https://frutjam.com/id/components/link.md): 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](https://frutjam.com/id/components/loading.md): 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](https://frutjam.com/id/components/marquee.md): 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](https://frutjam.com/id/components/mask.md): 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](https://frutjam.com/id/components/menu.md): 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](https://frutjam.com/id/components/modal.md): Modal CSS Tailwind khusus CSS yang menggunakan elemen `` 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](https://frutjam.com/id/components/navbar.md): 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](https://frutjam.com/id/components/pagination.md): 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](https://frutjam.com/id/components/popover.md): 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](https://frutjam.com/id/components/progress.md): 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](https://frutjam.com/id/components/radial-progress.md): 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](https://frutjam.com/id/components/radio.md): 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](https://frutjam.com/id/components/range.md): 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](https://frutjam.com/id/components/rating.md): 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](https://frutjam.com/id/components/select.md): 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](https://frutjam.com/id/components/sidebar.md): 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](https://frutjam.com/id/components/skeleton.md): 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](https://frutjam.com/id/components/stat.md): 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](https://frutjam.com/id/components/status.md): 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](https://frutjam.com/id/components/steps.md): 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](https://frutjam.com/id/components/surface.md): 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](https://frutjam.com/id/components/swap.md): 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](https://frutjam.com/id/components/table.md): 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](https://frutjam.com/id/components/tabs.md): 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](https://frutjam.com/id/components/tag.md): 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](https://frutjam.com/id/components/textarea.md): 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](https://frutjam.com/id/components/timeline.md): 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](https://frutjam.com/id/components/toast.md): 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](https://frutjam.com/id/components/toggle.md): 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](https://frutjam.com/id/components/tooltip.md): 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. ### Blok 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. - [Tajuk](https://frutjam.com/id/blocks/header.md): 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](https://frutjam.com/id/blocks/hero.md): 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](https://frutjam.com/id/blocks/pricing.md): 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. ### Plugin Perluas Frutjam dengan plugin Tailwind CSS khusus CSS. Nol JavaScript, dapat diakses WCAG, kerangka kerja-agnostik. Bekerja dengan Django, HTMX, Laravel, dan kerangka kerja apa pun. - [Editor Penurunan Harga](https://frutjam.com/id/plugins/markdown-editor.md): Plugin editor teks penurunan harga yang mengubah area teks asli menjadi rangkaian pengeditan lengkap — tidak diperlukan sinkronisasi. WYSIWYG dan mode Markdown biasa, pratinjau langsung, temukan & ganti, dukungan RTL, mode gelap. Bekerja dengan Django, Laravel, Rails, Node.js, PHP, dan tumpukan apa pun.