Next.js
Install and configure Next.js.
1
Create project
Run the init command to create a new Next.js project or to setup an existing one:
pnpm dlx shadcn@latest init
You can use the -d flag for defaults i.e new-york, zinc and yes for the css variables.
pnpm dlx shadcn@latest init -d
2
Configure components.json
You will be asked a few questions to configure components.json:
1 Which style would you like to use? › New York2 Which color would you like to use as base color? › Zinc3 Where is your global CSS file? › app/globals.css4 Would you like to use CSS variables for colors? › yes5 Where is your tailwind.config.js located? › tailwind.config.js6 Configure the import alias for components? › ~/components7 Configure the import alias for utils? › @acme/ui/lib/utils8 Are you using React Server Components? › yes
3
Add components
Use the CLI to add components to your project:
pnpm dlx shadcn@latest add button
You can add multiple components at once:
pnpm dlx shadcn@latest add button card avatar