Apa yang dipakai KilatKoding
KilatKoding memakai:
- Tailwind CSS 3
- shadcn/ui
next-themes- CSS variables di
app/globals.css dan app/marketing.css
- design preset system untuk halaman marketing
Dua jenis komponen yang perlu kamu kenal
| Layer | Lokasi | Fungsi |
|---|
| Primitive UI | components/ui/ | Button, input, dialog, table, tabs, badge, dan komponen dasar lain |
| Product components | components/sections/, components/dashboard/, components/admin/, components/docs/ | Blok yang sudah siap dipakai untuk halaman nyata |
Komponen dasar yang sudah terpasang
Repo ini saat ini membawa 44 primitive shadcn/ui, termasuk:
- form controls seperti
input, textarea, checkbox, select, switch
- layout dan display seperti
card, table, tabs, accordion, sheet
- feedback seperti
alert, alert-dialog, tooltip, sonner
- navigation helpers seperti
breadcrumb, navigation-menu, pagination
Showcase yang sudah ada
| Route | Fungsi |
|---|
/docs/components | Showcase komponen UI publik dengan kategori dasar, kontrol, form, navigation, overlays, data, dan dashboard |
/dashboard/components | Showcase komponen dashboard dan admin untuk user login |
/docs/components saat ini menampilkan 68 demo siap pakai, yang mencakup primitive dan komponen turunan dashboard.
Kategori showcase publik
| Kategori | Contoh isi |
|---|
| Dasar | badge, button, card, avatar, separator |
| Kontrol | switch, slider, toggle, radio group |
| Form | input, textarea, form, checkbox, select |
| Navigasi | breadcrumb, navigation menu, tabs, pagination |
| Overlay | dialog, drawer, sheet, popover, tooltip |
| Data | table, chart, progress, skeleton |
| Dashboard | contoh komponen siap pakai untuk area produk |
Sistem preset desain marketing
Halaman marketing mendukung 12 preset desain:
defaultmonochromenewsprintluxuryacademiasaasprofessionalenterpriseneo-brutalismbauhausweb3terminal
Preset ini berguna kalau kamu ingin:
- menguji gaya visual berbeda tanpa menulis ulang struktur halaman,
- mendemokan variasi style ke klien,
- memilih arah desain sebelum melakukan polishing lebih lanjut.
File yang biasanya kamu ubah saat mengubah UI
| Tujuan | File |
|---|
| Token warna dan radius global | app/globals.css |
| Styling marketing khusus | app/marketing.css |
| Ekstensi Tailwind | tailwind.config.ts |
| Konfigurasi shadcn/ui | components.json |
| Section landing page | components/sections/* |
| Header dan footer | components/layout/* |
Rekomendasi saat rebranding
- Ubah copy dan struktur section terlebih dahulu.
- Baru sesuaikan warna, typography, dan spacing.
- Gunakan komponen
components/ui/ sebagai dasar, jangan membuat primitive baru tanpa alasan kuat.
- Cek kembali tampilan di halaman publik dan dashboard.
Kalau kamu ingin hasil visual yang cepat tetapi tetap konsisten, mulai dari preset marketing lalu lanjutkan ke token CSS global.
