Okay, so like I mentioned, the new React Laravel starter kit is using SHA CN UI. So we're going to install a fresh new project and take it from there. Alright, let's go with laravel new shad-cn-deconstructed. And here we will choose React. I'll go with the default for everything else and yep, I'm going to npm install and build a project and we should be all good.

And yep, I'm going to npm install and build a project and we should be all good. So I'll open the project inside of VS Code. Let's start the server with npm run dev and our app should be up and running. All right, very cool. So if I go to the login page, all of these are built with chat CN UI components and if I go in the resources/js folder, you'll see a components folder which contains all

you'll see a components with then a UI folder which contains all of the generated chatsCn UI components like the button or the dropdown menu. If we look in the package.json file, however, we will not find any trace of chatsCn UI, we have a bunch of Radix UI components, which is something that chatsCn is using, but there is no per se chatsCn library in the dependencies. And that's the whole thing about chatsCn UI.

but there is no per se chatcen library in the dependencies. And that's the whole thing about chatcen ui. It doesn't want you to pull components from a library but instead own the components. And all of these have been generated inside this ui directory here. And so we're going to progressively dive inside this component and study them to learn about some patterns that are being used by SHA CN ui.

to learn about some patterns that are being used by SHA CN ui. But before we do that, we are actually going to remove all the SHA CN UI components and see how we can bring them back and generate them with the CLI. Okay, so I'm going to remove a whole lot of things in the starter template. Actually, I will remove the entire components, hooks, layouts, lib directories,

Actually, I will remove the entire components, hooks, layouts, lib directories, probably more than we need to remove. And I will also remove all the oath pages. So oath settings and dashboard. In my welcome page, I'll get rid of everything again and just have a <p> tag that says Hello Shad CN ui. And I don't need the oath so I don't need the imports and we can have a super minimal file.

And I don't need the auth so I don't need the imports and we can have a super minimal file. Let's check that our app is still working and yep it is. And I wanna delete a few more things. So in the CSS ShadCN UI has also generated a bunch of custom stuff. What I'm going to do is I will just keep the import tailwind.css and the sources that are defined for the Laravel app and I will delete everything else. So this is sort of a minimal vanilla tailwind setup.

and I will delete everything else. So this is sort of a minimal vanilla tewin setup. And the last thing I'm going to delete is the components.json file here and we'll talk about all of these things throughout the series. Alright, at this point I'm going to git init on the project and git commit everything we've got so far so that when we bring stuff with the SHA C.

and commit everything we've got so far so that when we bring stuff with the SHA and CLI, it makes it clearer to see what has happened to the code base by looking at the diff. So let's go git in it, we'll change the branch name to main. Uh, let's add everything so far and git commit -m "initial commit". Alright? And like I said, this is going to allow us to see the files that have been changed whenever we generate something with the CLI.

to see the files that have been changed whenever we generate something with the CLI. Okay, I've removed a whole lot of things and it's almost like if we had never had SHA CNUI on the project, I've actually haven't removed the dependencies in package.json. But other than that it's almost like we've never used the project and now we are going to pretend that we set it up for the first time. So you get to see the workflow.

that we set it up for the first time. So you get to see the workflow whenever you install it from scratch, from the chat and UI website. If I go to the docs and the installation page, you'll be pretty pleased to see that there is a label setup guide and it's actually incredibly easy to get started with some other frameworks. You have to actually run an init step that is going

with some other frameworks. You have to actually run an init step that is going to generate a components.json file. But whenever you use Laravel, it's going to auto detect that you're using Laravel and generate the correct components.json file for you and put the stuff in the right folders according to the Laravel Convention. Super cool. So here's step one is to create a new Laravel app with the React starter,

Super cool. So here's step one is to create a new Laravel app with the React starter, which we've already done. And then you can go ahead and simply start adding components with npx create-react-app@latest add. So here they have the example of Switch, but I'm going to copy the command without the component name, just the add. And I'm going to paste this in my VS Code terminal.

name, just the add. And I'm going to paste this in my VS Code terminal. So let's go ahead and create a button component. And you see it's prompting me to create that components.json file. Remember I have deleted it, it was present in the template but I've removed it and so we'll proceed. Yes. And for the base color, let's go with Slate. I really like Slate. Now don't worry too much about this warning, it's at a stage right now where some

I really like Slate. Now don't worry too much about this warning, it's at a stage right now where some of the dependencies that Chat Cian is using haven't updated the peer dependencies to react 19. And so that's why we get this warning, but we can use the fourth flag and just assume everything will be good in not too long. Alright? And so it's created one file in resources/js/components/UI/Button.tsx, like I mentioned.

Alright? And so it's created one file in resources/js/components/UI/button.tsx, like I mentioned before, the CLI has detected that we are in the Laravel app and so it's going to place the component inside the resources/js directory, which is the convention in Laravel. Okay, so let's take a look at the git diff to understand what has happened. The first thing is these components.json file was generated by the CLI

The first thing is these components that JSON file was generated by the CLI and it's basically a config file for shared CNUI. So you can see we selected the slate base color. It has determined that our CSS file entry point is leaving in resources/css/app. We don't have a config because we are in a Tailwind four project and it's also created a few aliases for us. So we can conveniently reach out for the UI directory,

and it's also created a few aliases for us. So we can conveniently reach out for the UI directory, for example, with at/slash component/slash ui. Looks like it's modified our package.json, I imagine these are just version differences between the React Acceler kit and the freshest version of Chat cen. Yep, indeed. So you can see a Radix UI dependency that is slightly updated. Uh, and it's going to be the same

that is slightly updated. Uh, and it's going to be the same for a few other dependencies. And by the way, you can see here that the starter kit was installing Tailwind CSS animate. And I know because I read the docs that this has been replaced now in ChatGPT with TW animate CSS, by the time you see this video, the starter kit might have been updated or I may myself open a pull request to do the updates.

the starter kit might have been updated or I may myself open a pool request to do the updates. All right, I think that's it. And now it's going to get very interesting. So in a CSS file where all we were doing was import tailwind.css and add some sources for the just-in-time engine to detect, you can see it created a custom variance for dark and generated a bunch of themes CSS variable for border radius and colors.

and generated a bunch of themes CSS variable for border radius and colors. So we'll talk about all of this throughout the series, but you can see that the colors are defined here in the root scope and then redefined within a dark scope. So all of this has been generated by Shay and UI as well. Of course we have a button component, which is the one we decided to generate with the CLI. Again, we'll dive into all of these throughout the series, but you can see it has variance

Again, we'll dive into all of these throughout the series, but you can see it has variance and then it has different variance styles for default, destructive outline, secondary ghost, et cetera. And then it exports a button components that essentially composes all these classes together. And you might notice this CN function here, which brings us to the last change made by SHA CN UI to the code base. This utl that TS file, which exports a CN function as a utility slash helper.

This util that TS file, which export a CN function as a utility slash helper. And this helper function, the CN function is going to be the first topic of our study. So it's a small but essential piece of the chat ui, uh, ecosystem. And so we're going to analyze it, understand what it does, why it's useful, and we're going to do this over the next few lessons.

to do this over the next few lessons.