Install Dashboard

Setelah proses instalasi awal project selesai, sekarang kita akan melangkah ke tahap berikutnya, yaitu menambahkan package dashboard yang sudah disediakan oleh shadcn/ui.

Sedikit pengenalan, shadcn/ui adalah sebuah library komponen UI untuk React/Next.js yang dibuat dengan prinsip modular, fleksibel, dan siap pakai. Artinya, kita bisa langsung menggunakan komponen yang sudah terdesain rapi—seperti tombol, form, card, atau layout dashboard—tanpa harus membuat semuanya dari nol. Selain itu, komponen-komponen ini sudah mendukung tailwindcss, sehingga sangat mudah dikustomisasi sesuai kebutuhan desain kita.

Tujuannya adalah: supaya kita tidak perlu membangun dashboard dari nol. Dengan begitu, pekerjaan kita lebih efisien, dan hasilnya tetap rapi serta dinamis. Daripada menghabiskan waktu membuat struktur dashboard manual, kita cukup memanfaatkan template bawaan ini. Ibaratnya, kita sudah diberi kerangka rumah yang kokoh, tinggal kita isi dan modifikasi sesuai kebutuhan.

Langkahnya sederhana. Pastikan teman-teman sudah berada di direktori project Next.js, lalu jalankan perintah berikut di CMD atau Terminal:

npx shadcn@latest add dashboard-01

Perintah ini akan langsung menambahkan komponen dashboard lengkap dengan struktur dan styling yang sudah siap pakai. Tinggal kita sesuaikan sesuai konsep aplikasi yang sedang kita kembangkan.

Uji Coba Dashboard

Setelah dashboard berhasil ditambahkan, langkah selanjutnya adalah uji coba. Tujuannya untuk memastikan semuanya berjalan dengan baik dan tampilan dashboard muncul seperti yang diharapkan.

Pertama, jalankan kembali project Next.js teman-teman dengan perintah berikut di Terminal:

npm run dev

Perintah ini akan menyalakan server development Next.js, sehingga kita bisa melihat hasilnya secara langsung di browser, dengan cara mengakses url berikut ini:

http://localhost:3000/dashboard

Kesimpulan

Dengan menambahkan dashboard menggunakan package shadcn/ui, kita mendapatkan banyak keuntungan:

1. Efisiensi Waktu – Tidak perlu membuat dashboard dari nol, karena sudah ada template siap pakai.
2. Struktur Rapi dan Dinamis – Komponen, layout, dan styling sudah terintegrasi, sehingga mudah untuk dikembangkan lebih lanjut.
3. Mudah Disesuaikan – Kita bisa langsung mengubah atau menambahkan fitur sesuai kebutuhan aplikasi.
4. Langsung Bisa Diuji – Setelah instalasi, cukup jalankan npm run dev dan akses http://localhost:3000/dashboard untuk melihat hasilnya secara real-time.

Singkatnya, langkah ini membantu kita mempercepat proses pengembangan dashboard, sambil tetap menjaga kualitas tampilan dan fungsionalitas aplikasi Next.js. Pada materi selanjutnya, kita akan belajar menambahkan them mode kedalam dashboard itu agar mendukung dark dan light mode.