Install Shadcn/ui with Laravel + React❤️

Currently there are lots of CSS frameworks such as Bootstrap, Bulma, Semantic UI etc. which can speed up building a display (user interface). One of the CSS tools that is currently trending is Shadcn/ui. What is it before?

On the official website Shadcn/ui states

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

So shadcn/ui is a collection of components that can be reused in views, built using TailwindCSS and RadixUI. Currently it supports several frameworks such as Next.js, Laravel and so on. can be seen on the official website Shadcn/ui.

Of the many frameworks that are supported. Our main goal is how to install Shadcn/ui on Laravel React, using Laravel Breeze.

First step: install the laravel project.

laravel new laravel-shadcn

Here we use the Laravel installer (global). In the next stage we will be asked to choose an option as in the image below

Fill in according to your project needs. If so, wait until the installation is complete. Installation speed depends on your internet connection.

The Laravel project installation is complete. OK Continue!.

Second step: Installing Shadcn/ui on the Laravel project

Still in the same terminal. First, type the command below:

cd laravel-shadcn
npx shadcn-ui@latest init

If so, a request will appear and fill it in according to your needs. as the following example.

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

If you are a typescript user then you can choose yes, OK, Next. Go to vscode or according to your favorite code editor. here I use vscode then just use the following command

cd laravel-shadcn

code .

It will automatically open vscode as well as open your laravel project. If so, the next step is to open the app.css file in the resource/css/app.css folder to ensure that shadcnui has been successfully installed in our Laravel project.

In the picture above shadcn has been successfully installed on our Laravel project.

Explanation:

• Shadcn will automatically update the app.css file
• When we need components such as buttons, alerts, tables, etc. then we need to install it via the root terminal of your laravel project. (Requires internet connection)
• All the components you need can be seen on the official ShadcnUI website
• When you have finished installing the components, we will automatically generate a new file in the resources/js/Components/ui/Button.jsx folder. We can also modify this file according to our wishes.

Third step: Make sure Shadcn is installed
To ensure that ShadcnUI has been installed we can give a command in the terminal. namely, for example, we will install the button component, the command is: npx shadcn-ui@latest add button can be seen in the image below

Then open the Welcome.jsx file and follow as in the image below.

If so. open two Terminals with the same directory, namely laravel-shadcn

Terminal 1

npm run dev

Terminal 2

php artisan serve

Then open it in the browser and a button component will appear which default is dark in color.

The above is the detailed content of Install Shadcn/ui with Laravel + React❤️. For more information, please follow other related articles on the PHP Chinese website!