Brief Summary
This video demonstrates the new Shadcn CLI, a revolutionary tool for building web applications. It showcases how to create a multi-page Next.js application with a login page, dashboard, graphs, and AI chat section using just four Shadcn commands. The video highlights the power of Shadcn blocks, which are pre-built UI components that can be easily integrated into your application. It also explores theming options and the integration of Vizer AI for generating UI designs.
- Shadcn CLI simplifies web application development with pre-built UI components (blocks).
- The video demonstrates building a multi-page Next.js application with login, dashboard, graphs, and AI chat.
- Shadcn blocks offer a wide range of UI elements, including charts, sidebars, and login screens.
- The video showcases theming options and the integration of Vizer AI for generating UI designs.
This video introduces the new Shadcn CLI, a command-line interface that simplifies web application development. The CLI leverages Shadcn, an open-source component system built on Tailwind CSS for styling and Radix UI for accessibility. The video highlights the revolutionary nature of the CLI, particularly its integration with blocks, Vizer AI, and its potential to set a new standard for component libraries.
The video demonstrates creating a Next.js application using the Shadcn CLI. The init command is used to initialize the application, and the sidebar1 building block is added to create a sidebar component. The CLI automatically generates a directory structure, components, and configuration files, including a components.json file for managing components. The video also highlights the use of CSS variables for theming, which allows for easy customization of the application's appearance.
The video shows how to run the newly created Next.js application using npm run dev. The application includes a landing page and a dashboard page with a sidebar. The video demonstrates how to customize the sidebar by removing the default background color. The video emphasizes that while the CLI provides a significant productivity boost, some manual tweaking is still required.
The video explains the concept of Shadcn blocks, which are pre-built UI components that can be easily integrated into your application. The video highlights the availability of various blocks, including charts, login screens, and authentication components. The video also demonstrates how to view the available blocks in the Shadcn registry.
The video demonstrates adding a login UI to the application using the login01 block. The add command is used to incorporate the block into the application. The video explains that the CLI automatically generates the necessary components and files for the login UI, including a Source/app/login directory.
The video shows how to link the landing page, login page, and dashboard page together using Next.js's Link component. The video demonstrates how to add a login button to the landing page that links to the login page. It also shows how to add a link to the dashboard page within the login form, creating a basic application flow.
The video demonstrates how to apply a new theme to the application using Shadcn's theming options. The video shows how to copy theme variables from the Shadcn website and paste them into the application's global CSS file. The video highlights the ease of customization and how the theme changes affect various UI elements, including the progress bar and icons.
The video introduces the new Shadcn charts and their corresponding blocks. The video demonstrates how to add a chart to the dashboard page by importing the charts01 block. The video emphasizes the simplicity of integrating charts into the application, requiring only importing the block and adding the desired data.
The video briefly mentions the ability to import components from the previous version of Shadcn (v0). This feature allows developers to use existing components in their new applications.
The video mentions that while the current login and sidebar blocks are not compatible with other frameworks like Vue or Remix, the authors are working on adding support for these frameworks in the future.
The video concludes by encouraging viewers to try out the Shadcn CLI and share their feedback. It also promotes the author's new course on Next.js, which covers topics like the app router, AI chat app development, authentication, CSS styling, and application architecture.
Summarize any YouTube video in seconds
Get summaries like this one for any video, in your language, with the free Summ app.
Transcript
Full transcript of “ShadCN’s Revolutionary New CLI”. Click a timestamp to open the video at that moment. Need another video? Use the YouTube transcript generator.
0:00 I'm not being hyperbolic when I say that Chad cen's new command line interface or CLI is a revolutionary Game Changer it's revolutionary because the combination of the CLI with blocks and then the connection to vzer and AI I think it's going to set the standard for what we expect from component libraries here on out but I'm getting ahead of myself so if you aren't familiar with Shaden it is an open-source component system based on top of Tailwind for styling and radics for accessibility and the unique twist here is that it copies the code into your code base so that you can alter the Styles as you see fit later on now with the old CLI you could initialize your app to work withad CN and you can add components like button and Carousel but
0:45 with this new CLI it can create an application for you they've added a whole bunch of new components including a lot of graphs and they've added huge building block features like a sidebar and a login screen plus there's one more absolutely knockout feature I'm going to show you at the end that shows opens up a world of possibility you got to see it it's really super cool so in this video we'll start with nothing and we'll build out a multi-page nextjs application with a login page a dashboard page graphs an AI chat section with just four Shad CN commands now there's a little bit of tweaking we'll do here and there it's not no code but it is a huge productivity accelerator if you know what you're doing let's get into
1:34 [Music] it all right I'm going to start with the new Shad CN CLI here you can see that it's Shad CN and not Shad cn- UI the way it used to be I'm still doing at latest we get the latest version of course using the init command as we did before but I'm also adding the sorer option because what's going to happen is it's going to look at this directory say you know you don't have any application here you don't have a v app or remix app or a xjs app going so I'm going to create one for you and it's going to create an xjs app Rider application and in part in doing that by default it would put the app directory at the top so that Source directory will go and create a source directory for us which is kind of the way that I like it and then we also add
2:20 this sidebar1 building block that's going to add a page that's in our application that has a nice sidebar on it we'll see that in just a second let's hit enter and see how we go all right so as we expect we don't have anything in this directory so I'm going to let it build us an xjx project I'm just going to call it dashboard app I'll take New York neutral and I will use CSS variables for theming that's going to come in handy when we actually apply a new theme and now it's done its usual init it's created a components Json file locally and then it's set that registry and it's updated our tailing to Fig as well as our globals those globals have those theme variables that we said we wanted and then it's also added a whole bunch of stuff so it's added 23 files on top
3:07 of what we already got from xjs the first one is the route for dashboard that's dashboard page. TSX that's where that sidebar 01 is going to go then it created a bunch of components appsbar and ab Main and so on that would run that UI then it brought in some helper Hooks and then it brought in what we would originally think of as Shaden which is the utils file as well as any components that we wanted in this case it's going to bring in Avatar button collapsible and so on all of that great stuff all right let's go check this out I'm going to go bring it up in cursor all right so we got dashboard launched let's bring over terminal and then I'll do pmpm Dev to run it in Dev mode Let's go take a look and now on Port 3000 we get our nextjs landing page not bad we also get slash dashboard now it's got
3:53 this whole sidebar thing going now this is where the little tweaking comes in as I said it's not no code we do need to know what we're doing so in this case the component I think is sidebar and then in the sidebar component down in here yeah there's this background accent 50 which is I guess a light gray we'll get rid of that all right that looks a lot better we took out that gray that was created by the sidebar container that was set up but I got to tell you like right out of the box that's a gorgeous looking sidebar and it's got everything you need it's got all the nav over here as a control for selecting a workspace up here it's got a login system down here I got to say the last job I was at it took us basically a month in combination with the designer
4:40 to completely work out the responsive sidebar and it was a hassle so having it like this out of the box is absolutely amazing and this sidebar is what they're calling a block so let's talk about this for a second so we got the Shad Cen UI library and you're used to comp on so you got things like accordion and alert and Avatar and badge and all that stuff well now you've also got blocks there's a lot of blocks that are shown here in this case this is block charts 01 and you can actually see all of the blocks in the registry so I go over here we can see that we got the login and sidebar blocks as well as authentication blocks charting blocks dashb blocks a login block as well as
5:28 our sidebar block that we just used so let's try out the login block so go back into a cursor stop the process and this time I'm going to do add instead of a nit and I'll do login 01 so this new CLI is look at that login block seeing that the login block needs a button and it's telling us well do we want to overwrite the one that's already there you just say no we haven't made any changes anyway but it doesn't really matter same thing with card input and so on and so what has done primarily is create this Source app login so let's give it another try go back to Local Host go to the login page and now I've got a good look login now under the hood this is not implemented but the UI is there and often times when it comes to authentication the UI is half the battle
6:15 so this is a lot you're getting out of the box so let's kind of change this around to be a flow so let's imagine that this is the logged out landing page for our application it tells what the application does and so on and of course it has a login button so let's go and Implement on that so go here to page I'll bring in link from next link and then right at the top here I'll add a login button so we'll make a link to login and then we'll bring in button and to do that we'll bring in button from components UI button right we'll it save now we got our login button and that takes us to the login page now the login page once that's done should take us to the dashboard so let's do that so let's jump on over here to login form so now this is the form for the login it's already got link and it's already got button so let's wrap our login button in
7:03 a link to go to the dashboard page now hit login and we're over on the dashboard awesome so you got the kind of basic flow of an application there you got the landing page you got it going to the login page the login obviously needs authentication and all that but once you logged in then you go to in this case the dashboard page to see what's up with your service I guess and you would obviously change the the Navar which is actually easy to do it's data driven so that's a really good start now let's talk about theming because that's often what you want to do so how do you do a new theme well let's go over here to themes in Chad C nuui we can customize it we can say we want something in a violet for example and then all we need to do is just copy that code we'll take
7:49 that back over to cursor we'll go to our Global CSS and then we'll replace everything in this layer base with what I just got from the site and let's try and our progress bar has turned a violet as well as our icon up here for Acme Inc nice let's see how it affects the dashboard that we want to add so let's go back into our building blocks and let's pick one of these I'm going to take charts 01 so how would I do that well okay let's go back over here so go to cursor and again I'll stop and I'll do MPX shadan add latest and then charts drop it in there and I'll hit return okay looks good now let's do PM pm now over in our dashboard we're going to go import charts one all right now we
8:35 got that imported let's go use it let save and go back to our host wow impressive and so what an accelerant to development and there are all kinds of blocks you can bring in check out these charts here all of these charts have corresponding blocks and you can just simply find the corresponding block that that goes with that chart bring that in drop it in your page add the data that you want that corresponds to the data you want to put in that chart and you're good to go but you haven't actually seen the coolest thing yet but before we get into that I do want to talk about my new course it's pron nextjs so what you're going to get with pron nextjs is a fully up-to-date
9:20 course on the nextjs app router you get a guided walkthrough of creating and deploying a nextjs based AI chat app with full authentication and we don't just cover how to do it but we also get into why it works that way and what your options are architecturally but of course it doesn't stop there you get a full breakdown of all your CSS styling options as well as what component libraries work well with nextjs then you get a full architecture tutorial on how to set up your application how to organize components share components between applications test your application use a monor repo and so much more and you go deep into react server components you learn all about the caching in xjs which can really trip you up as well as how to set up trpc grpc graphql and all the API options and you learn server actions at a super deep
10:07 level as we explore how to cach those you will see nowhere else it's an amazing course that I know you get a lot out of and I'm super proud of it go check it out today on pron nextjs dodev all right let's go check out this super cool feature so I'm going to go to vzer that's the versal AI UI building site and I'm going to go take a look at the chat that I had a couple of days days ago where I asked it give me a dashboard layout with a line graph a p graph and a chat section to interact with the AI of course I could continue to Rev on that so let's go and bring this code into my app and that's as easy as clicking the install button here saying copy that'll give us our Command go back over to the cursor We'll
10:52 add that it's again saying well I use card do I want to overwrite it nope and button and input all right that's created a dashboard component so let's bring in that in this case it's not the default so we need to import it as just dashboard let's it save and give it a try now go back over to Local Host try it again nice but of course we have a sidebar and it's not handling Dark theme so let's go tweak that so if I go to dashboard it has a nicely labeled sidebar section that we can just get rid of and then we can see that it's overriding the background to be gray 100 let's get rid of that and there you go fully integrated UI of our own design and of course you can make this data driven and build an app really quickly super cool now you don't need to use
11:38 nextjs to use Shad CN you can also use it in V the current login and sidebar are not compatible with v or remix but the authors tell me they will be at some point in addition they're going to be adding a lot of blocks I can't wait to see what they come up with all right well I hope you enjoyed that quick look at the Shad CN CLI definitely go check it out let me know in the comments what you think about it in the meantime if you like this video hit that like button if you really like the video hit the Subscribe button and click on that Bell and be notified the next time a new blue colar coder comes out
