Sumber Terbuka · Berlisensi MIT · Gratis Selamanya
Library Komponen CSS Tailwind Khusus CSS yang Dapat Diakses untuk Pengembangan Cepat
Frutjam adalah pustaka UI sumber terbuka dan sangat cepat yang dibuat untuk pengembang yang peduli dengan aksesibilitas, standar, dan integrasi tanpa batas dengan Tailwind CSS.
Sesuai W3C, ramah SEO, dan mudah digunakan.
Sangat dapat disesuaikan
Didukung oleh kelas utilitas Tailwind CSS
Frutjam memberi Anda kelas komponen yang bersih, sekaligus membiarkan setiap utilitas Tailwind tersedia untuk penyesuaian. Ubah jarak, warna, tata letak, dan interaksi dengan mudah menggunakan kelas utilitas di atas komponen Frutjam.
Komponen yang dapat disesuaikan
Setiap komponen Frutjam dirancang untuk menerima utilitas Tailwind, sehingga Anda dapat mengubah gaya tanpa menulis CSS khusus.
Kontrol yang mengutamakan utilitas
Gunakan kelas Tailwind seperti text-lg, px-6, dan bg-base-200 untuk menyesuaikan komponen dalam hitungan menit.
Mulailah dalam hitungan detik
Dua impor dan Anda siap membangun. Tidak ada alat build, tidak ada konfigurasi, tidak ada runtime.
Step 1
Instal melalui npm
Tambahkan Frutjam ke proyek Anda dengan satu perintah.
npm install frutjam |
Step 2
Impor di CSS Anda
Tambahkan Tailwind dan Frutjam ke stylesheet Anda.
1 2 | @import "tailwindcss"; @import "frutjam"; |
Step 3
Gunakan komponen yang bersih
Tulis kelas semantik alih-alih rantai utilitas yang panjang.
1 2 3 | <button class="btn btn-primary"> Get Started </button> |
Lihat aksinya
Komponen nyata, kode nyata — salin dan kirimkan.
Tombol
1 2 3 4 5 6 | <div class="flex flex-wrap gap-2"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-outline">Outline</button> <button type="button" class="btn btn-soft btn-success">Success</button> <button type="button" class="btn btn-soft btn-error">Danger</button> </div> |
Lencana & Label
1 2 3 4 5 6 7 | <div class="flex flex-wrap gap-2"> <span class="badge badge-primary">Primary</span> <span class="badge badge-success">Active</span> <span class="badge badge-warning">Pending</span> <span class="badge badge-error">Error</span> <span class="badge">Default</span> </div> |
Ukuran Tombol
1 2 3 4 5 6 | <div class="flex flex-wrap items-center gap-2"> <button type="button" class="btn btn-primary btn-xs">XSmall</button> <button type="button" class="btn btn-primary btn-sm">Small</button> <button type="button" class="btn btn-primary">Base</button> <button type="button" class="btn btn-primary btn-lg">Large</button> </div> |
Kartu
Card Title
A clean, accessible card component ready to use in any project.
1 2 3 4 5 6 7 8 9 10 | <div class="card card-sm card-outline"> <div class="card-content"> <h4 class="card-title">Card Title</h4> <p>A clean, accessible card component ready to use in any project.</p> <div class="flex gap-2 mt-3"> <button type="button" class="btn btn-primary btn-sm">Action</button> <button type="button" class="btn btn-outline btn-sm">Cancel</button> </div> </div> </div> |
Mengapa menggunakan perpustakaan Frutjam UI?
Frutjam adalah pustaka UI khusus CSS sumber terbuka dan gratis yang dibuat dengan Tailwind CSS v4 yang berfokus pada aksesibilitas dan pengembangan yang lebih cepat. Ini tidak memerlukan konfigurasi JavaScript yang rumit atau bundel JS yang besar — menjadikannya alternatif DaisyUI yang ringan untuk tim yang membutuhkan komponen yang sesuai dengan WCAG tanpa overhead JavaScript.
Cukup tambahkan @import "frutjam" ke stylesheet Anda untuk memulai. Frutjam menghilangkan kebutuhan akan daftar kelas Tailwind CSS yang panjang di HTML Anda; cukup gunakan kelas semantik yang bersih untuk membuat komponen dengan mudah. Sesuaikan tema dengan mudah menggunakan variabel CSS sederhana, dan semua komponen diperbarui secara instan.
Standar W3C
HTML yang bersih dan valid untuk aplikasi web modern.
Aksesibilitas Pertama
Setiap komponen dibuat dengan mempertimbangkan a11y.
Kontras Warna
Komponen lulus pemeriksaan kontras warna WCAG AA/AAA.
Ramah SEO
Markup semantik untuk visibilitas mesin pencari yang lebih baik.
Ramah Pengembang
API yang sederhana dan intuitif serta integrasi yang mudah.
CSS & HTML Pertama
Tidak ada penguncian JavaScript — gaya dan struktur adalah yang utama.
Dukungan CSS Tailwind
Berfungsi sempurna dengan alur kerja Tailwind yang ada.
Dukungan RTL
Sepenuhnya kompatibel dengan bahasa kanan-ke-kiri.
Responsif
Tampak hebat di perangkat apa pun, ukuran layar apa pun.
Dipelihara Secara Aktif
Komponen baru, pembaruan, dan dukungan komunitas.
Tema Profesional
Beralih antara mode terang dan gelap, atau buat mode Anda sendiri.
Tata Letak & Komponen Bawaan
Blok bangunan yang siap digunakan untuk proyek apa pun.
Sumber Terbuka
Berlisensi MIT dan berbasis komunitas.
Dukungan Plugin
Perluas Frutjam dengan plugin yang berguna seperti Markdown Text Editor.
Kurangi Ukuran DOM
Sejumlah besar elemen bertumpuk atau tidak diperlukan dapat menyebabkan rendering melambat. Sederhanakan struktur komponen Anda dan tingkatkan kinerja dan kemudahan perawatan.
100/100 di Google PageSpeed Insights
Raih 100 sempurna dalam Kinerja, Aksesibilitas, Praktik Terbaik, dan SEO menggunakan perpustakaan Frutjam UI. Situs web ini dibangun seluruhnya dengan Frutjam UI dan mencapai skor keseluruhan 100/100 di Google PageSpeed Insights.
Situs web berjalan lebih cepat, memberikan pengalaman pengguna yang lebih baik, dan memiliki peringkat pencarian yang lebih tinggi. Di web berbasis AI saat ini, situs yang lebih cepat diprioritaskan—alat AI sering kali memindai situs web secara real-time, dan mereka lebih memilih halaman yang cepat, efisien, dan tidak menyia-nyiakan sumber daya komputasi. Bangun lebih cerdas dengan perpustakaan UI yang siap menghadapi masa depan.
CSS murni, tidak memerlukan JavaScript. Kerangka-agnostik dan sepenuhnya kompatibel di mana saja.
Pustaka Frutjam UI tidak memerlukan bundel JavaScript yang besar karena ditulis dalam CSS murni. Hal ini membuat proyek Anda ringan dan dioptimalkan untuk waktu muat yang lebih cepat dan kinerja yang lebih lancar. Ia berfungsi sempurna dengan kerangka web atau backend apa pun, baik Anda menggunakan React, Vue, Angular, Next.js, Django, HTMX, Laravel, atau sekadar HTMX biasa.
Untuk Kerangka Modern
Kerangka kerja Anda cepat. Tetap seperti itu.
Next.js, Svelte, dan Vue dirancang untuk kinerja luar biasa dan SEO — rendering server, JS minimal, hidrasi instan. Namun saat Anda menambahkan pustaka komponen berat yang penuh dengan JavaScript yang membengkak untuk sesuatu yang sederhana seperti modal, Anda menukar semua yang dijanjikan oleh kerangka kerja tersebut.
Frutjam dirancang sebagai yang mengutamakan CSS dan yang asli. Tidak ada paket JavaScript. Tidak ada overhead waktu proses. Tidak ada perubahan tata letak. Batasan kinerja kerangka kerja Anda menjadi kinerja aktual — bukan hanya kinerja teoretis.
Pergeseran Tata Letak Nol
Komponen CSS murni dirender secara instan bersama halaman — tidak diperlukan JavaScript untuk melukiskan UI. Pergeseran Tata Letak Kumulatif (CLS) Anda tetap di 0, mempertahankan skor PageSpeed yang sempurna.
Tanpa Overhead JS
Setiap KB JavaScript yang disimpan kerangka Anda dari pemisahan bundel, Frutjam tidak pernah menambahkannya kembali. Tombol, kartu, modals, lencana — semuanya dalam CSS. Waktu Anda untuk Berinteraktif tetap cepat.
SEO yang Memberikan
HTML semantik, markup valid W3C, dan kontras warna WCAG siap digunakan. Mesin pencari membaca struktur yang bersih. Pasangkan kerangka kerja modern dengan Frutjam dan peringkat serta kinerja halaman Anda.
Tidak ada lagi HTML jelek, lebih sedikit nama kelas, mudah dipelihara, dan pengembangan lebih cepat.
Tidak Ada Lagi Kelas yang Berantakan: Satu Kelas Melakukan Semuanya. Daripada menulis kelas yang berantakan setiap saat untuk setiap elemen, setiap halaman, dan setiap proyek, lagi dan lagi, gunakan nama kelas komponen Frutjam untuk memudahkan pemeliharaan dan penskalaan serta pengembangan yang lebih cepat tanpa memusingkan kelas yang berantakan.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // Styling a simple button in Tailwind css clutter of utility class <button class="bg-gray-100 text-gray-900 text-sm px-3.5 border font-semibold duration-200 py-2 transition-all hover:border-gray-300 hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 inline-flex gap-2 rounded-sm active:border-gray-300 active:bg-gray-200 active:shadow-none text-center align-middle cursor-pointer border-gray-200 dark:border-gray-700 dark:bg-neutral-700 dark:text-gray-300 dark:hover:border-gray-950 dark:hover:bg-gray-950 dark:focus-visible:outline-gray-200 dark:active:border-gray-950 dark:active:bg-gray-900"> Button </button> // Styling a simple button in frutjam component class <button class="btn"> Button </button> |
<button type="button" class="btn">Button</button> |
Tema & Kustomisasi
Frutjam menggunakan variabel CSS sederhana untuk tema. Ubah satu variabel dan setiap komponen diperbarui secara instan — tanpa pembangunan kembali, tanpa perubahan kelas.
1 2 3 4 5 6 7 8 9 10 11 12 13 | /* Override the default theme in your CSS */ :root { --color-primary: oklch(55% 0.2 250); --color-primary-content: #fff; --radius-base: 0.5rem; --font-base: "Inter", sans-serif; } /* Dark mode overrides */ [data-theme="dark"] { --color-base-100: oklch(15% 0.01 250); --color-base-content: oklch(90% 0.01 250); } |
Apa yang dapat Anda sesuaikan
Warna
Primer, sekunder, aksen, kesalahan, sukses, peringatan, dan semua warna dasar — masing-masing melalui satu variabel CSS.
Radius Perbatasan
--radius-base menskalakan semua komponen sekaligus — ubah satu variabel, setiap elemen diperbarui.
Typography
Kelompok font, skala ukuran, dan tinggi garis — atur sistem jenis Anda satu kali dan semua komponen akan mewarisinya.
Jarak & Ukuran
Varian padding dan ukuran komponen — gunakan pengubah ukuran bawaan atau ganti token spasi secara global.
Perpustakaan Komponen
Semakin banyak koleksi komponen bawaan yang dapat diakses untuk setiap kasus penggunaan.
Tombol & Formulir
Varian tombol, masukan, kotak centang, pilihan, dan tata letak formulir lengkap.
Modal & Dialog
Dialog modal, laci, dan perintah konfirmasi yang dapat diakses.
Navigasi
Bilah navigasi, bilah sisi, remah roti, dan navigasi tab.
Kartu & Tata Letak
Varian kartu, sistem grid, dan kerangka tata letak halaman.
Peringatan & Bersulang
Peringatan status, spanduk pemberitahuan, dan pesan umpan balik sebaris.
Lencana & Tag
Lencana status, tag kategori, dan komponen label.
Daftar & Tabel
Tabel data, daftar berurutan/tidak berurutan, dan daftar definisi.
Plugin
Editor penurunan harga, penyorot sintaksis, dan ekstensi yang lebih berguna.
Plugin Komunitas
Dicintai oleh pengembang backend. Editor Markdown asli-pertama.
Kebanyakan editor melanggar alur kerja web standar. MarkdownEditor menerapkannya — berada tepat di atas <textarea> sehingga backend Anda tidak akan pernah mengetahui perubahan apa pun. Ini hanya berfungsi dengan form method="POST", akses DOM standar, dan semua kerangka server yang siap digunakan.
Ganti <textarea> biasa dengan satu baris JS dan pengguna Anda mendapatkan pengalaman 10× lebih baik sementara pengontrol Django, Laravel, atau PHP Anda tetap sama seperti sebelumnya.
-
Tidak diperlukan pengikatan data — dapat digunakan dengan
form method="POST"secara langsung -
Akses standar — membaca dan menulis dengan
element.valueseperti masukan apa pun - Backend agnostic — PHP, Django, Node.js, Laravel, Rails — semuanya hanya membaca string biasa
- ~116 KB — hybrid WYSIWYG + mode biasa, RTL, unggahan gambar, pratinjau langsung, tanpa konflik CSS
Demo langsung — cobalah:
Penggantian drop-in — satu kelas, satu baris JS. Bagian belakang tidak berubah.
Integrasi Formulir Asli
Meningkatkan <textarea> standar. Kirim dengan <form> biasa dan akses konten melalui request.POST['name']. Tidak ada preventDefault(), tidak ada konstruksi FormData.
Unggah Gambar Tingkat Lanjut
Konfigurasikan unggahan server melalui API. Gambar langsung masuk ke CDN Anda — tidak ada Base64 yang membengkak di database Anda, tidak ada penalti SEO, tidak ada muatan yang membebani memori.
Kinerja Tinggi
Pembaruan pratinjau yang dibatalkan, penghitungan gaya dalam cache, dan penanganan keyboard bebas konflik. Menangani ribuan baris tanpa jeda input — dan semua gaya editor memiliki cakupan penuh sehingga dapat digunakan dengan aman bersama kerangka CSS apa pun.
Bagaimana perbandingan Frutjam?
Lihat bagaimana Frutjam dibandingkan dengan Tailwind CSS, Bootstrap, dan DaisyUI biasa sebagai alternatif yang gratis dan dapat diakses.
| Fitur | Frutjam | DaisyUI | Angin Belakang Biasa | tali sepatu |
|---|---|---|---|---|
| Khusus CSS (tidak memerlukan JavaScript) | ✓ | ✓ | ✓ | Sebagian |
| Kelas komponen semantik | ✓ | ✓ | ✗ | ✓ |
| Kontras WCAG AA dijamin pada setiap komponen | ✓ | petunjuk | petunjuk | Sebagian |
| Bekerja bersama utilitas Tailwind | ✓ | ✓ | ✓ | ✗ |
| Tema variabel CSS | ✓ | ✓ | ✓ | Terbatas |
| 100/100 PageSpeed dapat dicapai | ✓ | ✓ | Bervariasi | Bervariasi |
| dukungan RTL | ✓ | Sebagian | Sebagian | ✓ |
| Kerangka kerja agnostik (Django, HTMX, Laravel) | ✓ | ✓ | ✓ | ✓ |
| Tema melalui variabel CSS biasa, tanpa file konfigurasi | ✓ | Sebagian | petunjuk | ✗ |
| Integrasi editor AI (MCP / konteks) | ✓ Gratis | Dibayar | ✗ | ✗ |
AI Editor Integration
Menggunakan Kode Claude, Kursor, atau Copilot?
Cherry MCP menghubungkan Frutjam langsung ke editor AI Anda. Dapatkan kode komponen yang akurat, nama kelas yang benar, dan dokumen terkini — tanpa menyalin-menempel dari browser.
Coba Cherry MCPPertanyaan yang sering diajukan
Semua yang perlu Anda ketahui tentang Frutjam.
Apakah Frutjam gratis untuk digunakan?
Ya — Frutjam berlisensi MIT dan sepenuhnya gratis. Gunakan dalam proyek pribadi, pekerjaan klien, dan produk komersial tanpa batasan, tidak diperlukan atribusi.
Apakah Frutjam cocok untuk proyek komersial?
Ya. Frutjam adalah open source di bawah lisensi MIT, yang mengizinkan penggunaan gratis baik pada produk pribadi maupun komersial tanpa royalti atau batasan apa pun.
Apakah Frutjam menggantikan Tailwind CSS?
Tidak — Frutjam dibangun di atas Tailwind. Anggap saja sebagai lapisan yang menambahkan kelas komponen semantik (.btn, .card, .badge) sekaligus menjaga semua kelas utilitas Tailwind tetap tersedia di sampingnya.
Apakah saya memerlukan JavaScript untuk menggunakan Frutjam?
Tidak diperlukan JavaScript. Frutjam adalah CSS murni — komponen seperti tombol, kartu, lencana, dan formulir berfungsi sepenuhnya tanpa runtime JS. Untuk pola interaktif seperti modals atau dropdown, ini cocok dipadukan dengan pustaka ringan seperti Alpine.js atau HTMX.
Bisakah saya menggunakan Frutjam dengan React, Vue, atau Angular?
Ya - Frutjam sepenuhnya agnostik kerangka kerja. Ia bekerja dengan sistem templating atau kerangka JS apa pun termasuk React, Vue, Angular, Svelte, Next.js, Nuxt, Laravel, Django, dan HTML biasa. Cukup impor CSS dan gunakan kelasnya.
Apakah Frutjam dapat diakses oleh pembaca layar?
Ya. Frutjam mengikuti pedoman WAI-ARIA dengan peran yang sesuai, dukungan navigasi keyboard, dan kontras warna WCAG AA/AAA yang siap pakai — membuatnya dapat diakses oleh semua pengguna tanpa konfigurasi tambahan.
Apakah PageSpeed meningkat saat menggunakan Frutjam?
Ya. Pendekatan Frutjam yang mengutamakan CSS menghindari pemblokiran JavaScript sepenuhnya. Dikombinasikan dengan markup valid W3C, kontras warna yang tepat, dan semantik HTML asli, ini berkontribusi langsung pada Core Web Vitals yang lebih baik dan skor PageSpeed 100/100.
Bagaimana cara menyesuaikan warna, font, dan radius?
Ganti variabel CSS di stylesheet Anda — setel --color-primary, --font-base, --radius-base, dan banyak lagi. Setiap komponen mengambil perubahan secara instan tanpa membangun kembali atau mengubah kelas apa pun di HTML Anda.
Dari Blognya
Pemikiran tentang membangun Frutjam dan pendekatan yang mengutamakan CSS pada UI.
Sumber Terbuka & Gratis Selamanya
Bergabunglah dengan Komunitas
Frutjam adalah open source dan berbasis komunitas. Setiap komponen, perbaikan, dan ide dari komunitas menjadikannya lebih baik bagi semua orang.
Menemukan bug? Punya permintaan fitur? Ingin menyumbangkan komponen atau menyempurnakan dokumen? Kami ingin sekali menerima Anda.