From the course: Next.js Ecommerce: Build a Shopping Platform from Scratch

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

ShadCN UI setup

ShadCN UI setup - Next.js Tutorial

From the course: Next.js Ecommerce: Build a Shopping Platform from Scratch

Start my 1-month free trial Buy for my team

ShadCN UI setup

“

OK, so now we're going to start to set up ShadCNUI, which is the component library that we'll be using. And it's a little different than other component libraries, like Material UI and Chakra UI, where you import all the components from a single package. With ShadCN, you first initialize it, and then you install the components separately with an add command. Now, as far as the components, you can look here. If you click on Components on the left here, There's all different types of components. There's charts, there's avatars, there's date pickers, all kinds of interactive, like, draw menus and things like that. So we'll be using a bunch of this stuff. Now, the first thing we need to do, if you go to Docs and then you go to, let's see, Installation, Next.js, we need to initialize it with this init command. And then once we do that, it creates a components.json file. And then we can run this, npx shad-cn-at-latest add, and then whatever component we want to add or install, such as the…

Contents