How to install shadcn/ui in Next.js

Next.js is the most popular choice for shadcn/ui, and for good reason. App Router, Server Components, and the CLI work together like they were made for each other (because, well, they kind of were).

Quick setup

npx shadcn@latest init

npx shadcn@latest add button

// app/page.tsx
import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center">
      <Button>Click me</Button>
    </main>
  )
}

Understanding the setup

When you run init, here's what actually happens:

Key files:

• components/ui/ - Where all shadcn/ui components live
• lib/utils.ts - The cn() helper for merging classes
• components.json - Configuration for the CLI
• app/globals.css - CSS variables for theming

Server Components compatibility

One of the best things about Next.js + shadcn/ui? Full Server Components support.

Components that don't need interactivity (like Card, Badge, Separator) work perfectly as Server Components. Interactive ones (like Dialog, Dropdown Menu) are marked with "use client" automatically.

// This works great as a Server Component
import { Card, CardHeader, CardTitle } from "@/components/ui/card"

async function Dashboard() {
  const data = await fetch('...')
  
  return (
    <Card>
      <CardHeader>
        <CardTitle>Server-rendered content</CardTitle>
      </CardHeader>
    </Card>
  )
}

Working with App Router

The App Router's file-based routing pairs nicely with shadcn/ui's component structure:

// app/dashboard/settings/page.tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card } from "@/components/ui/card"

export default function SettingsPage() {
  return (
    <Tabs defaultValue="general">
      <TabsList>
        <TabsTrigger value="general">General</TabsTrigger>
        <TabsTrigger value="security">Security</TabsTrigger>
      </TabsList>
      <TabsContent value="general">
        <Card>
          {/* Settings content */}
        </Card>
      </TabsContent>
    </Tabs>
  )
}

Deployment considerations

Next.js + shadcn/ui deploys perfectly to:

Since components are part of your codebase (not external dependencies), there's nothing special to configure for deployment.

Troubleshooting

"Cannot find module '@/components/ui/button'"

Your TypeScript paths aren't configured. Check tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Styles look broken

Make sure you're importing globals.css in your root layout:

// app/layout.tsx
import "./globals.css"

"Hydration mismatch" errors

Usually happens when using browser-only features in Server Components. Move interactive logic to Client Components with "use client".

Next steps

Now that you've got Next.js + shadcn/ui running:

1. Browse official components for forms, tables, and UI elements
2. Add charts for data visualization
3. Explore community components for extended functionality
4. Add useful hooks to enhance your components
5. Use pre-built blocks to quickly build common layouts

Remember—every component is yours to customize. Don't like how something works? Change it. Need a new variant? Add it. That's the power of owning your components.

Questions you're probably thinking