Pertama kali aku mengenal shadcn/ui adalah saat mengikuti bootcamp web development. Waktu itu mentor menjelaskan bahwa ada cara membuat UI dengan lebih cepat tanpa harus membangun semuanya dari nol. Ia memperkenalkan shadcn sebagai sebuah library komponen yang dibangun di atas React, Tailwind CSS, dan Radix UI.

Awalnya aku mengira ini hanya library UI biasa seperti Chakra atau Material UI. Tapi setelah mencobanya, pendapatku langsung berubah. shadcn/ui terasa lebih fleksibel, lebih bebas, dan lebih dekat dengan cara kerja Tailwind yang sudah terbiasa kupakai.

Awal Mula Menggunakan shadcn/ui

Di sesi bootcamp, kami diminta membuat dashboard sederhana. Biasanya aku harus membuat card, button, input, dan modal secara manual. Tapi kali itu mentor hanya berkata:

“Ambil komponennya dari shadcn, sesuaikan, selesai.”

Setelah mencoba, aku baru sadar kalau shadcn/ui bukan sekadar library import, tapi kumpulan komponen siap pakai yang bisa disalin langsung ke proyek. Dan karena formatnya file React biasa, komponennya bisa dimodifikasi sesuka hati.

Sejak itu, aku mulai terbiasa memakai shadcn dalam setiap project React atau Next.js.

Pengalaman Menggunakan shadcn/ui

Pembuatan UI Jadi Lebih Cepat

Pengalaman paling terasa adalah kecepatannya. Dengan shadcn, aku tidak perlu lagi membuat struktur dari nol. Misalnya modal, dialog, button, atau form:

• tidak perlu mikir positioning
• tidak perlu setup animasi
• tidak perlu bikin style dasar

Tinggal ambil komponen dari dokumentasi, paste, dan sesuaikan. Jika biasanya membuat sebuah UI butuh waktu cukup lama, kini bisa selesai dalam hitungan menit.

Tetap Fleksibel Karena Menggunakan Tailwind

Karena shadcn dibangun dengan Tailwind, aku tetap bisa mengubah styling dengan cara yang familiar. Class Tailwind tetap bisa digunakan, dan komponen dasar bisa diedit langsung.

Hal ini membuat shadcn terasa bukan “library milik orang lain”, tapi seperti toolkit pribadi yang bisa kamu bentuk sesuka hati.

Desain Lebih Rapi dan Konsisten

Salah satu hal yang paling sulit saat membuat UI dari nol adalah menjaga konsistensi. Kadang spacing berbeda sedikit, atau warna tidak seragam, atau ukuran font tidak sinkron.

Dengan shadcn:

• spacing sudah teratur
• tampilan modern secara default
• struktur rapi dan mudah dibaca

Aku tidak perlu repot memastikan semuanya seragam, karena base desainnya sudah terlihat profesional.

Komponen yang Sudah Aksesibel (A11y)

Dulu aku tidak terlalu memperhatikan aksesibilitas, bahkan cenderung mengabaikannya. Tapi setelah melihat bagaimana shadcn menggunakan Radix UI untuk mengatur fokus, keyboard navigation, dan aria attributes, aku jadi sadar pentingnya aspek ini.

Ternyata membuat UI yang aksesibel sangat rumit—dan shadcn sudah mengurus itu untukku.

Dokumentasi yang Mudah Diikuti

Hal lain yang aku suka adalah dokumentasinya. Tidak kaku dan terasa sangat developer-friendly. Tinggal pilih komponen, copy, dan langsung bisa digunakan. Rasanya seperti membaca catatan pribadi developer lain yang dibagikan ke komunitas.

Pendapat Pribadiku Tentang shadcn/ui

Setelah cukup lama menggunakannya, ini pendapat jujurku:

Kelebihan

• Komponen siap pakai yang bisa di-custom
• Tampilan modern tanpa harus mendesain ulang
• Cocok dengan Tailwind
• Aksesibilitas sudah diperhatikan
• Pembuatan UI jadi jauh lebih cepat
• File masuk ke project langsung, tidak terikat library

Kekurangan

• Jika project besar, jumlah file komponen bisa banyak
• Membutuhkan dasar React dan Tailwind yang cukup
• Tidak cukup cocok jika ingin UI yang sangat unik dari nol

Namun secara keseluruhan, untuk membuat aplikasi modern, dashboard, admin panel, atau website yang membutuhkan tampilan rapi dalam waktu cepat, shadcn/ui sangat membantu.

Insight yang Aku Dapat Selama Menggunakan shadcn/ui

1. Komponen siap pakai sangat meningkatkan produktivitas.
2. Konsistensi UI lebih penting dari yang kubayangkan.
3. Aksesibilitas bukan sekadar tambahan, tapi bagian dari UI profesional.
4. Kombinasi React + Tailwind + shadcn terasa sangat efisien.
5. Tidak semua UI harus dibangun dari nol— yang penting adalah efisiensi dan kualitas.

Kesimpulan

Pengalaman mengenal shadcn/ui dari bootcamp menjadi salah satu hal yang paling berpengaruh dalam perjalanan belajarku sebagai frontend developer. Dengan shadcn, proses membuat tampilan jadi jauh lebih cepat, lebih rapi, dan lebih konsisten tanpa mengorbankan fleksibilitas.

Jika kamu menggunakan React atau Next.js dan ingin membangun UI yang modern dan efisien, menurutku shadcn/ui adalah salah satu toolkit terbaik yang bisa kamu coba.