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.jsxfile 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.
Top comments (0)