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

  1. Ensure you have Node.js and NPM installed on your machine.
  2. Open your preferred code editor. This guide uses Cursor, but any editor will work.
  3. Visit the docs to copy the NPM command for initializing a new project.
  4. Open your terminal in the code editor and paste the command to create a new NextJS project.
  5. Once the project is initialized, change the directory to the newly created project folder using the terminal.
  6. Go back to the documentation and copy the command for installing components.
  7. 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`.
  8. Run the command `npm run dev` in the terminal to start the development server.
  9. Import a button component into your project to verify that the components are installed correctly.
  10. 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.