Setiap kali memulai proyek baru dengan Tailwind CSS, ada momen yang hampir selalu berulang: membuka tab browser, mencari referensi tampilan button, card, atau hero section, lalu menghabiskan waktu merakit dari nol. Library seperti shadcn/ui atau Flowbite membantu, tapi keduanya membawa konfigurasi dan setup tambahan yang tidak selalu kamu butuhkan.
Joko UI muncul dengan pendekatan yang lebih simpel: tidak ada npm install, tidak ada konfigurasi plugin, tidak ada setup apa pun. Selama proyekmu sudah pakai Tailwind CSS, kamu tinggal buka situsnya, pilih komponen yang dibutuhkan, copy kodenya, dan tempel langsung ke proyek. Selesai.
Library open source ini dibuat oleh rayasabari dan tersedia gratis di bawah lisensi MIT. Dengan lebih dari 45 komponen yang tersebar di dua kategori utama — Application dan Marketing — Joko UI cukup lengkap untuk membangun tampilan aplikasi maupun landing page.
Filosofi Zero Config
Banyak library komponen yang bagus tapi punya overhead setup yang cukup panjang. shadcn/ui misalnya, perlu CLI untuk inisialisasi, file components.json, dan konvensi folder tertentu. Flowbite perlu plugin Tailwind yang didaftarkan di tailwind.config.js.
Joko UI tidak ada satupun dari itu. Filosofinya cukup tiga hal:
- No Config — bekerja langsung dengan setup Tailwind standar tanpa perlu modifikasi konfigurasi
- No Install — tidak ada package npm yang perlu dipasang
- No Setup — tidak ada langkah inisialisasi; langsung pakai
Ini bukan berarti Joko UI primitif. Seluruh komponen ditulis dengan Tailwind utility class yang idiomatik, mendukung dark mode via modifier dark:, dan sudah responsif di berbagai ukuran layar.
Dua Kategori Komponen
Joko UI mengorganisir komponennya dalam dua kelompok besar.
Application Components
Komponen-komponen untuk membangun antarmuka aplikasi web fungsional. Di kategori ini kamu akan menemukan:
- Buttons — berbagai varian button dengan state yang sudah ditangani
- Cards — card untuk menampilkan konten dengan layout yang beragam
- Navigation — menu navigasi vertikal untuk sidebar aplikasi
- Description List — komponen semantik untuk menampilkan pasangan key-value, cocok untuk halaman detail produk atau profil
- Dashboard elements — elemen-elemen antarmuka untuk tampilan admin dan dashboard
Marketing Components
Komponen untuk kebutuhan landing page dan halaman pemasaran:
- Hero Sections — bagian pembuka halaman dengan berbagai layout
- CTAs — call-to-action untuk mendorong konversi
- Pricing Tables — tampilan tabel harga
- FAQ — accordion atau list untuk pertanyaan yang sering diajukan
- Footers — komponen footer halaman
- Description List — variasi deskripsi untuk kebutuhan marketing
Cara Menggunakan Komponen Joko UI
Alurnya tidak bisa lebih sederhana dari ini. Buka jokoui.web.id, navigasi ke komponen yang diinginkan, lalu preview tampilan yang tersedia.
Di setiap halaman komponen, tersedia beberapa kontrol:
- Breakpoint preview — preview tampilan di ukuran mobile, tablet, dan desktop langsung di browser
- Dark mode toggle — lihat bagaimana komponen terlihat di mode gelap sebelum dipakai
- Tab Code — lihat source HTML lengkap komponen
- Copy Code button — salin kode ke clipboard
Setelah kode tersalin, tempelkan langsung ke file HTML, Blade template, atau JSX kamu.
Menggunakan di React atau Vue
Komponen Joko UI ditulis dalam HTML murni dengan Tailwind class. Untuk menggunakannya di React atau Next.js, ada penyesuaian sintaks kecil yang perlu dilakukan: ubah atribut class menjadi className, dan pastikan tag yang self-closing ditulis dengan benar (<input /> bukan <input>).
Sebagai contoh, komponen button dari Joko UI mungkin terlihat seperti ini di HTML:
<!-- button.html -->
<button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600">
Get Started
</button>Di React, cukup ganti class menjadi className:
// Button.tsx
export function PrimaryButton({ label }: { label: string }) {
return (
<button className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600">
{label}
</button>
);
}Tidak ada logika tambahan yang perlu diimpor, tidak ada provider yang perlu dibungkus. Komponen bekerja murni lewat Tailwind class.
Menyesuaikan Warna dan Ukuran
Karena semua styling menggunakan Tailwind utility class secara langsung, kustomisasi dilakukan dengan mengganti class-class tersebut. Ingin mengubah warna primer dari biru ke hijau? Ganti bg-blue-600 dengan bg-green-600. Ingin radius yang lebih bulat? Ganti rounded-lg dengan rounded-full.
Tidak ada variabel CSS tersembunyi, tidak ada tema yang perlu dikonfigurasi ulang. Apa yang kamu lihat di kode adalah apa yang bisa kamu ubah langsung.
Dark Mode Tanpa Konfigurasi Tambahan
Salah satu hal yang cukup menarik dari Joko UI adalah dukungan dark mode yang konsisten di semua komponennya. Ini bekerja menggunakan modifier dark: dari Tailwind — yang berarti dark mode akan aktif sesuai dengan konfigurasi darkMode di proyek Tailwind kamu, baik itu lewat class dark di elemen html, maupun lewat media query sistem operasi.
Tidak perlu menambahkan logika switching secara manual ke setiap komponen. Cukup pastikan konfigurasi dark mode di proyek sudah benar, dan semua komponen Joko UI akan mengikuti.
Joko UI vs Library Komponen Lain
Penting untuk memahami posisi Joko UI di ekosistem yang sudah ramai ini. Ini bukan kompetitor langsung dari shadcn/ui atau Radix — tidak ada unstyled primitive, tidak ada system manajemen state, tidak ada aksesibilitas bawaan yang kompleks.
Joko UI adalah koleksi HTML+Tailwind yang siap pakai — lebih dekat ke Tailwind UI (versi berbayar dari Tailwind Labs) tapi gratis dan open source. Jika proyekmu butuh komponen dengan aksesibilitas tinggi dan interaktivitas kompleks (dropdown yang trap focus, modal dengan keyboard navigation), shadcn/ui atau Radix lebih tepat. Tapi jika yang kamu butuhkan adalah tampilan yang bagus dan langsung jalan, Joko UI menghemat banyak waktu.
Untuk referensi, artikel tentang penggunaan shadcn/ui di proyek React mungkin berguna jika kamu sedang mempertimbangkan kedua pendekatan ini.
Kontribusi dan Pengembangan
Repositori rayasabari/joko-ui aktif dikembangkan dan menerima kontribusi. Ditulis dengan TypeScript (98% dari codebase), proyek ini memiliki struktur yang cukup bersih untuk dieksplorasi jika kamu tertarik menambahkan komponen baru atau memperbaiki yang sudah ada.
Dengan lisensi MIT, tidak ada batasan penggunaan — bisa untuk proyek pribadi, komersial, maupun open source lainnya.
Kesimpulan
Joko UI mengisi celah yang sebenarnya cukup nyata: library komponen Tailwind yang tidak meminta apa pun dari kamu sebelum bisa dipakai. Tidak ada ceremony instalasi, tidak ada lock-in ke ekosistem tertentu. Kalau proyekmu sudah jalan dengan Tailwind, kamu sudah bisa mulai pakai Joko UI detik ini juga — cukup buka situsnya, copy, dan paste.
