# W4C UI > Design system Waste4Change: token warna, komponen Vue untuk Nuxt 4, dan situs > dokumentasi ini. Didistribusikan sebagai Nuxt layer (`@waste4change/ui`): > tanpa langkah build, komponen terdaftar otomatis dengan awalan `W4c`. ## Cara memakai - Pasang sebagai layer: `extends: ['@waste4change/ui']` di `nuxt.config.ts`, lalu `@import '@waste4change/ui/assets/css/style.css'` di CSS utama. - Tailwind v4 saja, tanpa `tailwind.config.js`. Pakai token semantik (`bg-surface`, `text-content-muted`, utilitas `tone-*`), bukan warna mentah. - Radius hanya `rounded-control` (4px) dan `rounded-panel` (6px). - Warna dan ukuran lewat props (`color`, `variant`, `size`); `class` hanya untuk tata letak. - Teks bawaan berbahasa Indonesia dan bisa diganti lewat props. - `W4cToaster` dan `W4cConfirmDialog` dipasang sekali di `app.vue`, lalu dipanggil lewat `useToast()` dan `useConfirm()`. - Panduan lengkap untuk agent ikut terkirim bersama paketnya: `node_modules/@waste4change/ui/AGENTS.md`. - Seluruh API komponen — props, v-model, event, dan slot — ada dalam satu berkas di `/llms-full.txt`. Berkas ini hanya daftar halamannya. ## Dokumentasi - [Pengantar](https://ui.w4c.id/docs/getting-started): Instalasi, dark mode, dan konvensi W4C UI. - [Catatan rilis](https://ui.w4c.id/docs/release-notes): Apa yang berubah di setiap versi. ## Fondasi - [Ringkasan](https://ui.w4c.id/foundations): Seluruh fondasi dalam satu halaman. - [Warna](https://ui.w4c.id/foundations/colors): Palet brand dan token warna semantik. - [Tipografi](https://ui.w4c.id/foundations/typography): Nunito, skala ukuran, dan empat berat huruf. - [Spacing & kerapatan](https://ui.w4c.id/foundations/spacing): Skala 4px, tinggi kontrol, dan alasan semuanya rapat. - [Radius & elevation](https://ui.w4c.id/foundations/radius-elevation): Dua radius, empat tingkat bayangan. - [Ikonografi](https://ui.w4c.id/foundations/icons): Seluruh koleksi Iconify, ukuran ikon, dan aturan namanya. - [Motion](https://ui.w4c.id/foundations/motion): Durasi, kurva, dan gerak yang bisa dikurangi. - [Aksesibilitas](https://ui.w4c.id/foundations/accessibility): Standar, kontras, pola keyboard, dan tugas aplikasi. - [Penulisan](https://ui.w4c.id/foundations/writing): Aturan teks Bahasa Indonesia untuk antarmuka W4C. - [Theme generator](https://ui.w4c.id/foundations/theme-generator): Tiga warna brand menjadi sebelas langkah per skala. ## Katalog - [Semua komponen](https://ui.w4c.id/components): Katalog seluruh komponen berdasarkan kategori. ## Dasar - [Accordion](https://ui.w4c.id/components/accordion): Bagian konten yang dapat dibuka dan ditutup. - [Alert](https://ui.w4c.id/components/alert): Pesan status, peringatan, dan umpan balik kontekstual. - [Avatar](https://ui.w4c.id/components/avatar): Foto, inisial, serta kelompok identitas pengguna. - [AvatarGroup](https://ui.w4c.id/components/avatar-group): Beberapa orang pada satu baris, dengan sisanya jadi +N. - [Badge](https://ui.w4c.id/components/badge): Label pendek untuk status, kategori, atau hitungan. - [Button](https://ui.w4c.id/components/button): Aksi utama, sekunder, tautan, ikon, dan loading. - [Card](https://ui.w4c.id/components/card): Wadah konten dengan header, body, dan footer. - [CopyButton](https://ui.w4c.id/components/copy-button): Tombol salin dengan konfirmasi yang terbacakan. - [EmptyState](https://ui.w4c.id/components/empty-state): Keadaan kosong dengan penjelasan dan tindakan berikutnya. - [Icon](https://ui.w4c.id/components/icon): Wrapper konsisten untuk seluruh koleksi Iconify. - [Kbd](https://ui.w4c.id/components/kbd): Tampilan tombol papan ketik untuk pintasan. - [Logo](https://ui.w4c.id/components/logo): Susunan logo Waste4Change untuk berbagai permukaan. - [SubBrand](https://ui.w4c.id/components/sub-brand): Logo dan nama produk dalam satu identitas subbrand. - [Progress](https://ui.w4c.id/components/progress): Bilah atau ring kemajuan proses dan kuota. - [ProgressGroup](https://ui.w4c.id/components/progress-group): Satu bilah yang memecah satu keseluruhan jadi bagian. - [Skeleton](https://ui.w4c.id/components/skeleton): Placeholder loading untuk teks, kartu, dan avatar. - [Spinner](https://ui.w4c.id/components/spinner): Penanda menunggu yang berputar, tanpa angka. ## Form - [FormField](https://ui.w4c.id/form/field): Label, hint, error, required, dan disabled bersama. - [FormInput](https://ui.w4c.id/form/input): Input teks custom dengan ikon, prefix, dan suffix. - [FormInputFile](https://ui.w4c.id/form/input-file): Pemilih file, drag-and-drop, validasi, dan preview. - [FormPassword](https://ui.w4c.id/form/password): Input kata sandi dengan kontrol lihat dan sembunyikan. - [FormCurrency](https://ui.w4c.id/form/currency): Nominal terformat dengan nilai model tetap numerik. - [FormPhone](https://ui.w4c.id/form/phone): Nomor telepon ternormalisasi dan pilihan kode negara. - [FormTextarea](https://ui.w4c.id/form/textarea): Teks panjang, auto-resize, dan hitungan karakter. - [FormCheckbox](https://ui.w4c.id/form/checkbox): Pilihan boolean, array, dan status indeterminate. - [FormRadioGroup](https://ui.w4c.id/form/radio-group): Satu pilihan dari beberapa opsi yang saling terkait. - [FormSelect](https://ui.w4c.id/form/select): Select custom, search, multiple, tag, CTA, dan paging. - [FormSwitch](https://ui.w4c.id/form/switch): Pengaturan hidup atau mati yang langsung berlaku. - [FormDatePicker](https://ui.w4c.id/form/date-picker): Tanggal tunggal, rentang, serta tanggal dan waktu. ## Navigasi & layout - [AppShell](https://ui.w4c.id/components/app-shell): Sidebar, header, drawer HP, dan navigasi bawah dashboard. - [Breadcrumb](https://ui.w4c.id/components/breadcrumb): Jejak hierarki dari beranda menuju halaman aktif. - [Pagination](https://ui.w4c.id/components/pagination): Navigasi data berbasis nomor halaman atau cursor. - [SegmentedControl](https://ui.w4c.id/components/segmented-control): Satu pilihan setara dalam satu bidang, seperti periode. - [Stepper](https://ui.w4c.id/components/stepper): Penunjuk posisi pada proses atau form bertahap. - [Tabs](https://ui.w4c.id/components/tabs): Berpindah panel lokal dengan pola keyboard WAI-ARIA. ## Overlay & feedback - [CommandPalette](https://ui.w4c.id/components/command-palette): Pencarian dan tindakan cepat dari satu dialog. - [ConfirmDialog](https://ui.w4c.id/components/confirm-dialog): Konfirmasi async untuk tindakan yang perlu keputusan. - [Drawer](https://ui.w4c.id/components/drawer): Panel yang masuk dari tepi layar untuk detail dan filter. - [DropdownMenu](https://ui.w4c.id/components/dropdown-menu): Menu aksi dan tautan dengan navigasi keyboard. - [Modal](https://ui.w4c.id/components/modal): Dialog modal dengan fokus, backdrop, dan scroll lock. - [Popover](https://ui.w4c.id/components/popover): Panel kecil berjangkar untuk keterangan dan filter. - [SelectionBar](https://ui.w4c.id/components/selection-bar): Bar mengapung berisi jumlah yang dipilih dan aksi massalnya. - [Toast](https://ui.w4c.id/components/toast): Notifikasi sementara yang bertumpuk dan dapat diberi aksi. - [Tooltip](https://ui.w4c.id/components/tooltip): Keterangan singkat untuk hover dan fokus keyboard. ## Data & utilitas - [CodeBlock](https://ui.w4c.id/components/code-block): Kode berwarna dengan filename dan tombol salin. - [DescriptionList](https://ui.w4c.id/components/description-list): Pasangan label dan nilai untuk halaman detail. - [Draggable](https://ui.w4c.id/components/draggable): Susun ulang item dengan pointer, sentuhan, atau keyboard. - [StatCard](https://ui.w4c.id/components/stat-card): Angka ringkasan dashboard dengan perubahan dan tautan. - [Table](https://ui.w4c.id/components/table): Tabel data dengan sort, filter, selection, dan drag. - [Timeline](https://ui.w4c.id/components/timeline): Riwayat kejadian berurutan dengan penanda dan garis. ## Pola - [Ringkasan](https://ui.w4c.id/patterns): Seluruh pola halaman dalam satu halaman. - [Dashboard](https://ui.w4c.id/patterns/dashboard): Angka ringkasan, pekerjaan yang perlu ditindak, aktivitas. - [Daftar & filter](https://ui.w4c.id/patterns/list-filter): Tabel dengan pencarian, saringan, dan pagination. - [Form bertahap](https://ui.w4c.id/patterns/stepped-form): Formulir panjang dipecah per langkah, dengan peninjauan. - [Halaman detail](https://ui.w4c.id/patterns/detail): Satu catatan: datanya, riwayatnya, dan aksinya. - [Kegagalan](https://ui.w4c.id/patterns/error): Halaman error, bagian yang gagal, dan aksi yang gagal. - [Masuk](https://ui.w4c.id/patterns/login): Halaman masuk dengan validasi dan pesan yang jelas.