Install Shadcn UI on Laravel Project

Hello friends Sony here welcome now you may heard about the shut UI both your component Library beautifully designed components that you can copy and paste into your application let's go to get started and let's see if we can add this on the larav project so here we have some Frameworks and also we have jaravel now as you can see we need to have inertia so installing of Lev with inertia and we have this command so L new the name of the application also add typescript Breeze and choosing stack react with one command or you can so let me open the war and let's say we create a laravel project with this command so L new and I going to say uh shot CN Das UI I'm going to the name it this hit enter I'm going to choose larel Breeze and let's choose react with inertia dark mode and also types script Al okay hit enter so we have created the lar project and choosing Breeze with inertia and react like this what we need to do next is to around this shoten UI so npx shut and- UI at latest I'm going to copy that let's say SQ light here because you are not working with the database okay so the project is ready let's see let's CD to sh CN UI and now here I'm going to say sudo and I'm going to paste this npx sh CN UI let test in it hit enter we add the password and we are okay now it's going to have some PRS okay I think we are good here so would you like to use typescript yes which style would you like to use you have here default or New York let's say New York uh which color would you like to use as a base color slate gray I'm going to choose slate here where is your Global CSS file now in our larel project we know that is inside the resources SL CSS SL app.css hit enter would like to use CSS variables for colors so primary uh secondary and so on let's say yes are you using a custom titting prefix no so leave it blank just hit enter and where is your ti. config.js located in larav is in the root directory somebody just hit enter and import alas for components we have here at SL components but if you want don't want that so the slash components is going to be for all components and for example for the Shan components I'm going to say at slash shot CN hit enter now import alas for utils I'm going to leave it as it is so add SL s/ utils are you using react server components no and write configuration. components. Json yes and we can configure we can change later if we don't like us we have chos right here now we are okay let's open this project uh first I'm going to open the project with vs code hit enter okay and let's open open the resources JS pages and the welcome. DSX okay I'm going to choose to remove everything here leave only the head and here I'm going to add uh H1 and we going to say welcome to your new inertia application okay save and let's open the project now in the browser so shot cn- ui. test hit enter and yeah we have something like this we have save the file but what we need is or let me just open here the terminal and we need to run the mpm around there okay now let's see if I refresh yeah here it is the welcome to your new inertia app what if I change the color so here I'm going to change the colors so for example text yellow 300 save let's come here and as you can see nothing changed here and why is that let's also open the shot CN UI because here we have if we scroll down so the shoten UI CLI will automatically override the tyin config.js file so we need to update it and here we have the example so what I'm going to do I'm going to copy only this one and now let's open the tyin config file in our project because here as you can see we have on the content we have page uh components app and source is like for the nextjs so let's update that with this vendor L and so on storage farmwork views resources views blade PHP and all the files we have inside the resources JS and all the files Master the TSX let's save that close and let's see on the browser if we open the larav project yeah now we have welcome to your new inertia app with yellow color okay let's see oh the other component because for that we have installed the shot here so you can now start adding components to your project and we here we have an example with the button let's choose npm here I'm going to say sudo because it's going to add file and a folder okay done now if we open the shut CM directory here we have the UI directory and inside we have this button. TSX which is a react component okay I'm going to close that and now we can use that or we can just add this button component in the HD so I'm going to add after the hge one and let's add the div with a class name the B for example Max with because here we have Ty CSS Max with MD and also I'm going to say MX Auto like this and then I'm with add the button and also let's close the div now here we have underline error because we need to inut import the button and let's copy that go up here import so we need to remove that because we don't use the link right now we have an underline here because cannot find module at/ components UI button because we changed that to shut CN okay so we need to say shut CN here and let's save and let's see now if I open the project here we have a button good let's see another component so I'm going to say a card yeah let's copy this for the mpm open the warp also hit enter good next we need to import all of that so I'm going to add here I'm going to remove the button now and we need to update this shoten and then let's go and copy this one and I'm going to add that let's close this I'm going to add that uh when we have button and let's save this let's open the project and here we have the card title description content and so on let's go back and let's see a new one so I'm going to go to drop down menu so yeah we have something like this and this is for the default so we have New York which look like this okay what we need is to copy this with npm and I'm going to choose warp here add drop down then we need to import so let's go up and replace this again shot CN here and copy the drop down menu and I'm going to replace the card now Save open the project and here we have the drop- down menu okay open close open and let's open to the shotan again and you may say why we don't have the same thing we have here because here we have something else so let me copy this and B it here just to have the same thing we have an example change that and also the other to be shut in next we need to copy this drop down and replace the one we have here Save open the project and as you can see now also the button is looking like a button and if we open we have the same uh drop- down menu okay friends that's it all about this video I hope you enjoy and if you like don't forget to subscribe to my channel like the video share with your friends and see you in the next one all the best

Channel: Code With Tony

Views: 5,259

Keywords: laravel, vuejs, livewire, laravel 8, laravel 9, laravel crud, laravel 8 tutorial, laravel 9 tutorial, laravel 10, laravel filament, laravel design, shadcn ui, shadcn ui for laravel, laravel react, laravel inertia, shadcn ui components, laravel with shadcn ui, laravel 11, install shadcn ui

Id: 3Sg1p0VB60U

Length: 12min 14sec (734 seconds)

Published: Thu Feb 08 2024