Modal & Dialog Component
Dialog pop-up dengan backdrop blur, animasi transisi, tombol close, dan kontrol keyboard/backdrop.
Standard Dialog
Dialog modal standar dengan title, konten informasi, dan aksi konfirmasi.
Destructive Dialog
Dialog konfirmasi tindakan kritis seperti menghapus data atau membatalkan sesi.
Form Inside Dialog
Modal berisi input form interaktif lengkap dengan validasi dan switch toggle.
<Dialog
open={isOpen}
onOpenChange={setIsOpen}
title="Konfigurasi Website"
footer={
<>
<Button variant="outline" onClick={() => setIsOpen(false)}>Batal</Button>
<Button variant="default" onClick={handleSave}>Simpan Perubahan</Button>
</>
}
>
<p>Isi konten dialog dengan form atau komponen apa pun...</p>
</Dialog>Typography Scale & Weights
Hirarki tipografi berbasis Inter font dengan skala perbandingan yang harmonis.
Kelola Situs Webjoz Anda dari Satu Dashboard Terpadu
Integrasi Otomatis Pembayaran QRIS & Pesan WhatsApp
Kustomisasi Section & Komponen Sesuai Identitas Brand
Analitik Pengunjung Real-Time & Laporan Penjualan
Webjoz dirancang khusus untuk mempermudah pembuatan landing page dan katalog produk tanpa kerumitan teknis. Desain modern, performa tinggi, dan ramah SEO.
Data transaksi diperbarui setiap 15 menit. Anda dapat mengekspor riwayat order ke format CSV atau menghubungkannya langsung ke spreadsheet eksternal.
OKLCH Design Tokens
Sistem palet warna OKLCH Webjoz yang mendukung transisi mulus antara Light dan Dark mode.
Form Controls & Inputs
Komponen formulir: Input, Select, Textarea, Checkbox, Switch, dan DatePicker.
Input & Select Elements
Input fields dengan variasi status validasi & helper text.
Gunakan huruf kecil tanpa spasi
Format email tidak valid
Format email tidak valid atau sudah terdaftar
Dukungan icon, sublabel & badge
Toggles, Switch & Pickers
Kontrol biner dan pemilihan tanggal interaktif.
Badges & Status Types
Label penanda status, tag kategori, dan indikator kesehatan sistem.
Standard Badges
Varian badge standar untuk tag dan kategori.
StatusBadge (Tone-Mapped)
Otomatis memetakan status ke tone warna (good, warning, danger, neutral).
Spinners & Shimmer Skeletons
Indikator loading progresif dan placeholder konten saat fetch asynchronous.
Spinner Sizes & Colors
Spinner putar berbasis Lucide Loader2.
SkeletonText
Placeholder paragraf dengan animasi shimmer.
SkeletonCard
Placeholder kartu konten utuh.
SkeletonTable (Simulasi Load Tabel Transaksi)
Placeholder grid/tabel saat memuat data pesanan.
Cards & Metric Displays
Komponen metrik performa, kartu analitik, dan tampilan status kosong (EmptyState).
Icon Components
Custom SVG icons (size: sm | md | lg) dan AI Sparkle components yang diekspor dari webjoz-ui.
1. Custom Icon Set
Semua icon dari webjoz-ui — tiga ukuran: sm / md / lg.
size="sm"
size="md" — default
size="lg"
2. SparkleIcon — AI Badge Indicator
Ikon sparkle untuk menandakan fitur AI. Gunakan className untuk ukuran dan warna.
3. SparkleGenAI — AI Generate Mascot Icon
Versi kedua sparkle mascot AI — dipakai sebagai ilustrasi atau penanda fitur generate. Props: classNameuntuk ukuran & warna.