Install Shadcn/ui dengan Laravel + React❤️

Ustami Razib — Wed, 21 Aug 2024 09:30:14 +0000

Pada saat ini banyak sekali framework CSS seperti Bootstrap, Bulma, Semantic UI dsb. dimana dapat mempercepat dalam membangun sebuah tampilan (user interface). salah satu tools CSS yang saat ini sedang trend yaitu Shadcn/ui sebelumnya apa itu ?

Dalam situs resminya Shadcn/ui menyebutkan

“a collection of reusable components that we can copy and paste into our apps.”

Jadi shadcn/ui adalah sebuah koleksi komponent yang dapat digunakan kembali dalam tampilan, yang dibangun menggunakan TailwindCSS dan RadixUI. pada saat ini sudah support dibeberapa framework seperti Next.js, Laravel dan sebagainya. dapat dilihat pada website resminya Shadcn/ui.

Dari banyak nya framework yang telah disupport. tujuan utama kita yaitu bagaimana menginstall Shadcn/ui pada Laravel React, menggunakan laravel breeze.

Langkah pertama : menginstall proyek laravel.

laravel new laravel-shadcn

Disini kita menggunakan laravel installer (global). Pada tahap selanjutkan kita akan diminta untuk memilih opsi seperti pada gambar dibawah

Isi sesuai dengan kebutuhan project anda. jika sudah, Tunggu sampai instalasi selesai. kecepatan instalasi tergantung pada koneksi internet anda.

Untuk instalasi proyek laravel sudah selesai. Oke Lanjut!.

Langkah kedua : Menginstall Shadcn/ui pada proyek laravel

Masih didalam terminal yang sama. Pertama ketikan perintah dibawah :

cd laravel-shadcn
npx shadcn-ui@latest init

Jika sudah maka akan muncul Permintaan dan isikan sesuai kebutuhan anda. sebagai contoh berikut.

Would you like to use TypeScript (recommended)? no 
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › resources/css/app.css
Do you want to use CSS variables for colors? › yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/Components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no

Jika anda pengguna typescript maka dapat memilih yes, Oke, Selanjutnya. pergi ke vscode atau sesuai dengan kode editor favorite anda masing-masing. disini saya menggunakan vscode maka hanya dengan menggunakan perintah berikut

cd laravel-shadcn

code .

Secara otomatis akan membuka vscode sekaligus membuka proyek laravel anda. jika sudah maka selanjutnya yaitu buka file app.css yang berada difolder resource/css/app.css untuk memastikan bahwa shadcnui berhasil di install di proyek laravel kita.

Pada gambar diatas shadcn telah berhasil di install pada proyek laravel kita.

Penjelasan :

Secara otomatis shadcn akan meng-update file app.css
Saat kita membutuhkan komponen seperti button, alert, table dsb. maka kita perlu meng-instalnya melalui terminal root proyek laravel anda. (Membutuhkan koneksi internet)
Semua komponen yang anda butuhkan dapat dilihat Pada website Resmi ShadcnUI
Ketika telah selesai meng-install komponen maka otomatis akan men-generate file baru pada folder resources/js/Components/ui/Button.jsx file tersebut juga dapat kita modifikasi sesuai dengan keinginan kita.

Langkah ketiga : Memastikan Shadcn Telah ter-instal
Untuk memastikan bahwa ShadcnUI telah terinstall kita dapat memberikan perintah pada terminal. yaitu sebagai contoh kita akan menginstall komponen button maka perintahnya : npx shadcn-ui@latest add button dapat dilihat pada gambar dibawah

Lalu buka file Welcome.jsx dan ikuti seperti pada gambar dibawah.

Jika sudah. buka dua Terminal dengan direktori yang sama yaitu laravel-shadcn

Terminal 1

npm run dev

Terminal 2

php artisan serve

Lalu buka pada browser maka akan tampil komponen tombol yang default berwarna Gelap.

DEV Community: Ustami Razib

Install Shadcn/ui dengan Laravel + React❤️