All the pieces.
Already here.
66 Coordiation components, adapted to native PHP. Ready-to-use CSS and JavaScript. No build step.
Read the component guideButton
Gunakan untuk aksi; pilih type submit di dalam form.
component('button')data-displayBadge
Tampilkan status singkat seperti Published atau Draft; variant mengatur warna..
component('badge')layoutCard
Kelompokkan judul dan deskripsi dalam satu article.
component('card')feedbackAlert
Pakai untuk hasil tindakan atau pesan validasi yang perlu terlihat di halaman..
component('alert')formsInput
Pasangkan name dengan kunci input backend.
component('input')formsTextarea
Tulis pesan panjang dalam field empat baris.
component('textarea')formsSelect
Berikan options berupa pasangan nilai dan label.
component('select')formsCheckbox
Gunakan checked untuk kondisi awal.
component('checkbox')formsSwitch
Gunakan untuk pilihan biner.
component('switch')layoutAccordion
Berikan daftar title dan text.
component('accordion')navigationTabs
Kelompokkan konten teks terkait melalui items.
component('tabs')data-displayTable
Susun columns dan rows dalam urutan yang sama.
component('table')data-displayAvatar
Tampilkan dua karakter pertama name dalam lingkaran.
component('avatar')feedbackProgress
Kirim value antara 0 dan 100.
component('progress')feedbackEmpty
Jelaskan mengapa sebuah daftar kosong dan tindakan berikutnya melalui title dan text.
component('empty')chartsInteractive Chart
Pilih salah satu dari 35 recipe.
component('interactive-chart')charts3D Chart
Pilih 3D bar, 3D scatter, 3D line atau 3D surface.
component('chart-3d')formsLabel
Gunakan for yang persis sama dengan id kontrol native yang Anda buat.
component('label')layoutSeparator
Pisahkan kelompok konten.
component('separator')feedbackSkeleton
Tampilkan placeholder ketika konten sedang dimuat.
component('skeleton')feedbackSpinner
Indikator loading memakai ikon restart bawaan DL dengan animasi CSS..
component('spinner')overlaysDialog
Tampilkan penjelasan singkat di dialog.
component('dialog')overlaysAlert Dialog
Minta konfirmasi sebelum tindakan.
component('alert-dialog')layoutAspect Ratio
Gunakan src lokal untuk gambar atau text untuk placeholder.
component('aspect-ratio')data-displayAttachment
Tampilkan nama berkas, metadata dan tautan opsional.
component('attachment')navigationBreadcrumb
Urutkan items dari induk ke halaman aktif.
component('breadcrumb')data-displayBubble
Gunakan side outgoing untuk membedakan pesan keluar; nilai lain tampil sebagai pesan masuk..
component('bubble')actionsButton Group
Tampilkan kelompok tautan yang berkaitan.
component('button-group')formsCalendar
value menggunakan format YYYY-MM-DD.
component('calendar')data-displayCarousel
items berisi title dan text.
component('carousel')data-displayChart
Ini adalah container data statis dengan caption dan tabel, bukan renderer grafik.
component('chart')layoutCollapsible
Bungkus satu penjelasan dalam disclosure.
component('collapsible')formsCombobox
Input teks dengan saran datalist native.
component('combobox')navigationCommand
Filter tautan berdasarkan label dan keywords.
component('command')overlaysContext Menu
Klik kanan atau Shift+F10 membuka menu; tombol Open context menu menjadi cara akses alternatif..
component('context-menu')data-displayData Table
Klik judul kolom untuk mengurutkan baris yang sudah ada di browser.
component('data-table')formsDate Picker
Input tanggal native memakai format YYYY-MM-DD.
component('date-picker')layoutDirection
Set direction rtl atau ltr untuk konten teks dalam container..
component('direction')overlaysDrawer
Buka panel modal dari tepi bawah untuk title dan text.
component('drawer')overlaysDropdown Menu
Kelompokkan tautan dalam disclosure.
component('dropdown-menu')formsField
Input teks dengan description dan error yang terhubung ke kontrol.
component('field')overlaysHover Card
Tampilkan informasi tambahan saat hover atau fokus pada tombol.
component('hover-card')formsInput Group
Gabungkan input teks dengan prefix dan suffix visual.
component('input-group')formsInput OTP
Satu input native untuk kode numerik sepanjang 4–8 digit.
component('input-otp')data-displayItem
Baris ringkas dengan ikon DL, title, text, dan tautan opsional.
component('item')data-displayKbd
Tampilkan petunjuk shortcut sebagai teks.
component('kbd')data-displayMarker
Sorot potongan teks dengan elemen mark..
component('marker')navigationMenubar
menus berisi label dan items tautan.
component('menubar')data-displayMessage
Gabungkan author, text dan waktu.
component('message')data-displayMessage Scroller
messages adalah daftar props message.
component('message-scroller')formsNative Select
Gunakan options sebagai pasangan nilai dan label.
component('native-select')navigationNavigation Menu
items berisi label, href dan current opsional.
component('navigation-menu')navigationPagination
Kirim page, pages dan base URL lokal.
component('pagination')overlaysPopover
Panel nonmodal menggunakan Popover API browser.
component('popover')formsQuestionnaire
steps berisi title, name, text dan label opsional.
component('questionnaire')formsRadio Group
options adalah pasangan nilai dan label.
component('radio-group')layoutResizable
Dua panel teks dengan range kontrol lebar 20–80 persen.
component('resizable')layoutScroll Area
Batasi daftar paragraf dalam area scroll.
component('scroll-area')overlaysSheet
Panel modal dari sisi kanan, berisi title dan text.
component('sheet')navigationSidebar
Navigasi vertikal dengan title dan items.
component('sidebar')formsSlider
Input range numerik; min, max dan step berupa integer, step minimal 1.
component('slider')feedbackToast
Tombol demo memunculkan notifikasi dengan title dan text.
component('toast')actionsToggle
Tombol status tekan dengan pressed awal.
component('toggle')actionsToggle Group
items menerima label, value dan pressed.
component('toggle-group')overlaysTooltip
Penjelasan singkat untuk tombol pemicu.
component('tooltip')data-displayTypography
Tampilkan title, text dan quote opsional dengan ritme tipografi yang konsisten..
component('typography')data-displayDual-tone heading
One semantic heading with a separately colored accent line, editable in the visual page builder.
component('dual-tone-heading')mediaBackground video
Film latar lokal tanpa suara dengan poster, tombol jeda, serta penghormatan reduced motion dan save-data.
component('background-video')hospitalityRoom collection
Editable room cards with image, display rate, size, guests, bed and detail link.
component('room-collection')hospitalityKey figures
Accessible key figures; use accurate values for your property.
component('key-figures')hospitalityText ribbon
A looping highlight strip with focus/hover pause and reduced-motion support.
component('text-ribbon')hospitalityStay planner
Arrival, departure and guests passed to a local smart-form page; enquiry only, no availability engine.
component('stay-planner')propertyProperty showcase
Editable residence rows with floor-plan imagery and property specifications.
component('property-showcase')layoutScroll Story
Cerita visual bertahap dengan gambar dan teks yang dapat diedit.
component('scroll-story')layoutExpanding Gallery
Galeri panel interaktif yang terbuka saat dipilih.
component('expanding-gallery')layoutStudio Pricing
Harga editorial dengan mode proyek/bulanan, add-on, CTA, dan kartu kontak.
component('studio-pricing')layoutPeople Story
Cerita editorial orang dan disiplin di balik sebuah studio.
component('people-story')