Component Library pada Starter Kit Laravel 12 dengan Inertia, React JS, dan Tailwind CSS

Ketika membangun aplikasi Laravel modern dengan frontend React, tentu kita ingin proses pengembangan terasa cepat, rapi, dan efisien. Karena itulah Laravel React Starter Kit ini disiapkan — sebagai pondasi awal yang modern dan siap pakai untuk membangun aplikasi SPA (Single Page Application).

Apa yang Disediakan Starter Kit Ini?

Starter kit ini menggabungkan kekuatan dari:

• ✅ Laravel sebagai backend yang solid dan elegan,
• ✅ React 19 sebagai frontend yang modern dan reaktif,
• ✅ TypeScript untuk penulisan kode yang aman dan terstruktur,
• ✅ Tailwind CSS sebagai utility-first CSS framework untuk styling yang cepat,
• ✅ Inertia.js sebagai jembatan antara Laravel dan React tanpa perlu API atau pengelolaan state yang kompleks.

Mengenal Component Library: shadcn/ui

Salah satu hal paling menarik dari starter kit ini adalah telah terintegrasinya shadcn/ui — yaitu kumpulan komponen UI berbasis Tailwind CSS yang:

• ringan dan fleksibel,
• sangat mudah dikustomisasi,
• dan siap pakai tanpa perlu library tambahan yang berat.

Dengan shadcn/ui, kita tidak perlu lagi membuat komponen dasar dari nol. Misalnya:

• Tombol (Button)
• Dialog/modal
• Form input
• Tabs, accordion
• Dan masih banyak lagi

Install Komponen UI dari shadcn/ui

Pada sesi ini, kita akan memasang dua komponen penting dari shadcn/ui yang akan sering digunakan dalam aplikasi:

• ✅ Table – untuk menampilkan data dalam bentuk tabel yang rapi dan responsif,
• ✅ Textarea – untuk membuat input teks panjang (multi-line), seperti deskripsi produk, komentar, atau catatan.

Langkah Instalasi

Pastikan kita sudah berada di direktori root proyek kita. Kemudian jalankan perintah berikut di terminal (CMD atau terminal VS Code):

npx shadcn@latest add table

npx shadcn@latest add textarea

Setelah menjalankan perintah tersebut, shadcn/ui akan secara otomatis:

• Menambahkan file dan folder komponen yang dibutuhkan,
• Menyesuaikan konfigurasi Tailwind (jika diperlukan),
• Dan menjadikan komponen siap untuk langsung digunakan dalam React component-mu.

Kesimpulan

Dengan hanya menjalankan dua perintah sederhana, kita sudah bisa menambahkan dua komponen penting yang siap digunakan untuk membangun antarmuka pengguna (UI) yang:

• Bersih dan konsisten,
• Cepat dibangun,
• Dan sangat mudah dirawat serta dikembangkan ke depannya.