Create project
Start by creating a new Next.js project using create-next-app:
1npx create-next-app@latest my-app --typescript --tailwind --eslint
Run the CLI
Run the shadcn-ui init command to setup your project:
1npx shadcn-ui@latest init
Configure components.json
You will be asked a few questions to configure components.json:
1Would you like to use TypeScript (recommended)? no / yes 2Which style would you like to use? › Default 3Which color would you like to use as base color? › Slate 4Where is your global CSS file? › › app/globals.css 5Do you want to use CSS variables for colors? › no / yes 6Where is your tailwind.config.js located? › tailwind.config.js 7Configure the import alias for components: › @/components 8Configure the import alias for utils: › @/lib/utils 9Are you using React Server Components? › no / yes
App structure
Here's how I structure my Next.js apps. You can use this as a reference:
1. 2├── app 3│ ├── layout.tsx 4│ └── page.tsx 5├── components 6│ ├── ui 7│ │ ├── alert-dialog.tsx 8│ │ ├── button.tsx 9│ │ ├── dropdown-menu.tsx 10│ │ └── ... 11│ ├── main-nav.tsx 12│ ├── page-header.tsx 13│ └── ... 14├── lib 15│ └── utils.ts 16├── styles 17│ └── globals.css 18├── next.config.js 19├── package.json 20├── postcss.config.js 21├── tailwind.config.js 22└── tsconfig.json
- I place the UI components in the
components/uifolder. - The rest of the components such as
<PageHeader />and<MainNav />are placed in thecomponentsfolder. - The
libfolder contains all the utility functions. I have autils.tswhere I define thecnhelper. - The
stylesfolder contains the global CSS.
That's it
You can now start adding components to your project.
1npx shadcn-ui@latest add button
The command above will add the Button component to your project. You can then import it like this:
1import { Button } from "@/components/ui/button"; 2 3export default function Home() { 4 return ( 5 <div> 6 <Button>Click me</Button> 7 </div> 8 ); 9}