Membuat dashboard nextjs dan cutom theme shadcn dengan tweakcn

date

Sep 23, 2025

slug

membuat-dashboard-nextjs-dan-cutom-theme-shadcn-dengan-tweakcn

status

Published

install nextjs

untuk membangun aplikasi pada konten kali ini saya akan menggunakan Bun, yaitu sebuah runtime javascript yang sangat keren dan cepat.

berikut perntahnya

selanjutnya ikuti perintah ini

Setup Shadcn

selanjutnya kita perlu menjalankan perintah dibawah ini dengan tujuan untuk setup shadcn UI ke dalam project nextjs

jika sudah terintall selanjutnya yaitu percobaan untuk mengintall sebuah component button dari shadcn

selanjutnya coba implementasi component button ke dalam project next.js yang dimiliki

Setup dashboard shadcn

tahap selanjutnya yaitu install block dashboard. Pertama kunjungi block shadcn pada halaman ‣. Pada halaman tersebut terdapat banyak block termasuk block dashbaord yang akan kita coba

setelah selesai install dashboard maka sleanjutnya secara otomatin perintah tersebut akan membuat file page.tsx di dalam folder dashboard, dan kalian bisa akses dengan llink seperti ini http://localhost:3000/dashboard, dan hasilnya akan terlihat seperti gambar di bawah ini

Custom theme with tweakcn

selanjutnya ke tahap terakhir yaitu menginstall tweakcn untuk custom theme dari shadcn.

untuk memulai pertama akses halaman website tweakcn https://tweakcn.com/editor/theme.

Pada halaman itu akan menampilkan beberapa theme, dan pada kali ini saya akan mencoba theme Bubblegum, atau kamu bisa memilih theme yang kamu mau.

setelah memilih theme yang akan kamu gunakan, selanjutnya arahkan cursor kebagian kanan atas sampai menemukan tombol code

selanjutnya copy semua css yang ada didalamnya. style ini kita akan gunakan untuk mengganti style pada file global.css nextjs

setelah copy, buka file global.css pada project nextjsmu, dan hapus semua code di dalam baris @theme inline, :root, .dark. Ganti dengan css yang di copy tadi, dan hasilnya akan seperti dibawah ini

Semoga bermanfaat