Complete Setup: Next.js + shadcn/ui + TypeScript

1. Creating the Next.js project

bash
pnpm create next-app@latest ./ --typescript --tailwind --eslint

• Would you like your code inside a src/ directory? No / Yes
• Would you like to use App Router? (recommended) No / Yes
• Would you like to use Turbopack for next dev?  No / Yes
• Would you like to customize the import alias (@/* by default)? No / Yes

This command will:

• Create a Next.js project in the current folder
• Configure TypeScript automatically
• Install and configure Tailwind CSS
• Set up ESLint for code quality

2. Installing shadcn/ui

Once the project is created, initialize shadcn/ui:

bash
pnpm dlx shadcn@latest init

Choose these options:

• Style: Default
• Base color: Neutral
• CSS variables: Yes

3. Installing useful components

bash
pnpm dlx shadcn@latest add button card badge

4. Recommended structure

Your project will have this structure:

bash
src/
├── app/
│ └── globals.css # Global styles
│ └── layout.tsx # Layout of the app
│ └── page.tsx # Home page

├── components/
│ └── ui/ # shadcn components

├── lib/
│ └── utils.ts # Utilities

5. First component

tsx
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"

export default function Home() {
  return (
    <main className="p-8">
      <Card className="p-6">
        <h1 className="text-2xl font-bold mb-4">
          Hello Next.js + shadcn!
        </h1>
        <Button>Get started</Button>
      </Card>
    </main>
  )
}

Why this stack?

• TypeScript: Type safety for fewer bugs
• Tailwind: Fast utility CSS
• shadcn/ui: Ready-made and customizable components

In 2 minutes, you have a modern and scalable project! 🚀