Components · 02
Komponen UI Showcase
Showcase semua primitive di @kiosklix/ui — variant, ukuran, dan state. Toggle dark mode di kanan atas untuk verifikasi kontras.
01
Buttons
7 varian (primary/secondary/outline/ghost/destructive/link/gradient), 5 ukuran, 4 bentuk, plus loading state.
02
Status badges
3 varian × 7 tone × 4 ukuran. Pakai dot-variant untuk indikator live/offline.
03
Inputs
Filled / Outline / Pill, dengan slot adornment kiri-kanan, sm/md/lg.
Format email tidak valid.
04
Form controls
Select / Dropdown (single, grouped, error), Checkbox (tri-state), RadioGroup — Figma section 4.
Select
Provinsi wajib dipilih.
Checkbox & Radio
Periode pembayaran
05
Cards
6 varian: default, elevated, flat, feature (peach), hero (gradient), tile (KPI).
Komponen utama untuk content area.
Order hari ini
428
+12%vs kemarin (382)
06
Dialog & Sheet
Pattern modal & drawer (akan di-URL-state-kan via nuqs di Step 8).
07
Toast notifications
Sonner-based, theme-aware, support promise/loading/action.
08
Icons
lucide-react primary; Material Symbols Outlined sebagai komplemen untuk PPOB-domain.
lucide-react
Material Symbols (PPOB-domain)
09
Tabs & layout
Pill tabs untuk sub-navigation di section management.
Total 84 produk aktif · 12 nonaktif.
10
Skeleton loading
State loading konsisten untuk RSC + Suspense.