Installation

Install and configure shadcn-ui.

Create Project

Start by creating a new Next.js project using create-next-app:

npx create-next-app@latest my-app

Run the CLI

Run the shadcn-ui init command to setup your project:

npx shadcn-ui@latest init

Configure components.json

You will be asked a few questions to configure components.json :

Would you like to use TypeScript (recommended)? no / yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › app/globals.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no / yes