Installing shadcn/ui
This guide provides step-by-step instructions on how to install Shadcn into a NextJS project. It covers the installation of the Shadcn library and its components, ensuring you can start using them in your project.
Instructions
- Ensure you have Node.js and NPM installed on your machine.
- Open your preferred code editor. This guide uses Cursor, but any editor will work.
- Visit the docs to copy the NPM command for initializing a new project.
- Open your terminal in the code editor and paste the command to create a new NextJS project.
- Once the project is initialized, change the directory to the newly created project folder using the terminal.
- Go back to the documentation and copy the command for installing components.
- In the terminal, paste the command and remove the word "button" to install all components at once. Press `A` on your keyboard or manually select the components you wish to install, then press `Enter`.
- Run the command `npm run dev` in the terminal to start the development server.
- Import a button component into your project to verify that the components are installed correctly.
- Ensure the button component is imported and functioning as expected in your project.
By following these steps, you will have successfully installed shadcn/ui into your NextJS project and can begin utilizing its components.
Up next
Generating code for the Pricing Card component
This guide provides instructions on using Figma to shadcn/ui plugin to generate code for pricing card component we created in the components chapter.