Everyone Is Missing What Makes NEW Shadcn Update Amazing

Shad CN just launched the ability for you to build your very own Shad CN. But honestly, that's not even the biggest thing in this update. Most people are glancing over the thing that is going to revolutionize how Shad CN is used going forward forever. Welcome back to WebDev Simplified. My name is Kyle and in this video I want to talk about this brand new Shad CN update where if you go to the Shad CN page/create, you can find this by clicking this new project button in the top right hand corner. This brings you to a page that has a bunch of demo examples of what the actual code will look like. But most importantly on the right hand side you can see we have a lot of different ways to customize exactly how Shad Cen is going to look. For example, in this preset category we have five different presets. This Vega one is kind of the default preset. This is what shaden normally looked like. You also have Nova which is kind of like a tighter less spaced out version. We have this Maya version which is a more spaced out more rounded off version. We have Elra version which is like a squared off version that has like a monospace font pretty much for everything. And then finally down here we have this Myra version which is going to be essentially an even more compacted version. So we have Vega which is spread out. We have Nova which is slightly more compact. We have Myra which is even more compact, smaller fonts. Lyra for a more squared off approach. And then we have the Smile one for a more rounded and larger spacing approach. The big update though that I alluded to in the intro is the fact that now you can use not only Radics UI but also base UI. And you'll notice when I swap between these two, my code looks exactly the same. You'll notice it didn't actually quite update properly. We'll change our default back to here. And you can see when I swap between Radics UI and base UI, the code is exactly the same visually between them. Even though Behind the Scenes is using an entirely separate component library, they also did the exact same thing with icons. You can see here you can swap which icon library you're using and it's going to swap all your icons automatically for you. So if we for example look you can see here we have this like up and down arrow version while if I change back to the lucid icons you can see you get the downwardfacing carrot. So we have the ability to swap not only the base UI library but also the icon library we're using which in my opinion is by far the biggest thing this update did. Sure, there's nice quality of life features for having some pre-built styles for spacing. Having a few different base colors you can work with, which were already part of Shadstan to begin with. Having the ability to choose your primary color is kind of nice in the theme section. But for the most part, these colorbased things and the font and the radius are really easy to change in Shadan. a couple lines of code, but rewriting your entire icon library or changing the entire base library to use base UI or radics UUI is a massive undertaking from the Shad team and something that you physically can't do very easily on your own. So, the fact that they implemented this means that going forward they may implement other future UI libraries for the base UI or radics UI to replace them with newer things that come out with better features. And same thing with icon libraries since they've done this work already to add in the interoperability between these different libraries. It means there's a future available for many, many different libraries to be introduced. Also, something that I think is really underrated that nobody is talking about is the fact that they have this page for creating all these different themes right now. It's rather limited on what you can actually change directly from here. But going forward, I could very easily see this being a much more involved thing, very similar to something like tweak CN, which is a super comprehensive theme customizer for Shaden. I could see that being kind of built into a system like this to make it so you can really customize what things look like. And already with these minor changes you can make, this essentially style section right here is where most of your customization comes about. But if you click the R key, it'll randomize between different things. And you can see just by doing that, we actually get a very significant difference in what our styles will look like. So this is a great way for you to kind of play around and make your site look a little bit different than the standard Shad Cian site. But if millions of people are making sites with, you know, four different, five different preset styles and 10 different colors, eventually you're going to see a lot of overlap between them, unless you go further to customize your site even more than just this small customization here. Now, if you do want to use this though, and let's say you customize your site, we're just going to randomize it a few times. Let's say this is what we landed on and we like, you can scroll down to the very very bottom. You can see you can randomize, start over, but at the top you can see this create project button. If we click on this, we can choose to do a Nex.js tan stack start or Vit project. All we need to do is just copy this command and it's going to create a brand new project for us using next.js tan stack start or vit. Let's just do next.js because most of us are familiar with that. We'll copy the command and then if we just paste that command down into our terminal make sure I paste that properly. There we go. You can see it's essentially just taking the URL that I pasted in. We'll just give it a default name. It's taking that URL from the site that I was just on for customizing all my different styling and it's creating me a project with all that. And if we look inside here, actually the really important thing is by default it creates you a standard Nex.js application. As you can see, it's going through. Once it finishes creating a NextJS application, it then takes your next.js application, installs Shad CM to it, and most importantly applies all of your different styling changes that you customized in that page that we were just on. So, if we give it just a second here, you should actually see relatively quickly that this entire page is going to get changed. If we go into our globals, you can see already all of our Shad CN stuff is inside of here. If we go into our page, again, this will very quickly change, but we already have our components JSON. We have our CSS inside this globals file. All the different shad stuff is being installed. And now you can see it immediately changed over this page. You can see we have this component example function. And if we go into the component section, you can see it's installed a bunch of different components. And if we go into this component example, this is essentially just an example page that shows us all the different components. So we can test out what our theme looks like in these various different styles. Now, that particular component that we were talking about, if I just zoom this out a little bit, you can see on the lefth hand side of my screen that we have essentially a bunch of different blocks that are built in. So you can kind of test around what this looks like. And again, these are all hooked up with these themes for us. But if we scroll all the way to the bottom of components where it says example, this is the page that gets generated when you use this create command. This is that example component page. But the nice thing about this is you can actually take a look at any component. For example, this drawer component. You can see exactly what it looks like for all your different themes. You can go ahead and look at your field page again, see what that looks like with all your different themes. So you can look at exactly what every component looks like across all the different permutations of that component. So you can really see what it looks like and customize your theme to the exact thing that you want. But in my opinion, the biggest thing about this update is the ability to use different component libraries and different icon libraries because that really opens up Shaden to a really powerful future. I think these customizations are quite limited beyond the actual component library and icon library. Most of the actual customization for how things look drastically different comes in one of these five different styles right here. Otherwise, you're just changing two different colors and changing around your border radius. I do think this is a really cool update though and I think in the future coming 3, four, 5 months from now, this is going to look drastically different and be way more customizable than it is right now. Also, something super important is in their post they specifically mentioned that they made sure that all these new changes for these different styles and so on will still work perfectly fine with any component library that is using a different registry. For example, I have my own shad registry that has things like a multi select component in it. So you can do different multis select stuff and they specifically crafted this update so that all of these existing registry components will work properly with that which is really a huge thing because without that we would lose a ton of different components. I know I use this multis select in pretty much every project I create. And if you're interested in trying out this multis select component I'll link it down in the description where you can actually get this entire registry of code or you can just use the at WDS registry. That's what this is configured under. Whenever you install anything inside of shad cn, it'll look essentially just like this at wds/multi select. Also, if you want to see the video where I show you how I built out this entire registry so you can build your own if you want, I'm going to link that video right over here so you can learn how to build your own custom components along with the custom theme that this new create functionality gives you. With that said, thank you very much for watching and have a good