dev_tools
guides
Back to guides

Next.js + shadcn/ui Setup

Set up a modern Next.js project with shadcn/ui components and Tailwind CSS

Next.js
React
shadcn
Tailwind
1

Create Next.js Project

Initialize a new project using create-next-app. See Next.js Installation.

npx create-next-app@latest my-app --typescript --tailwind --eslint
💡You will be asked a few questions. Select defaults if unsure.
2

Navigate to Project

Move into your newly created project directory.

cd my-app
3

Initialize shadcn/ui

Run the initialization command to set up the base styles and configuration. See shadcn/ui CLI.

npx shadcn@latest init
4

Add Button Component

Install the Button component to test your setup. See Button Docs.

npx shadcn@latest add button
5

Update Page Content

Replace the contents of src/app/page.tsx with this simple example using the Button.

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

export default function Home() {
  return (
    <div className="flex h-screen items-center justify-center gap-4">
      <h1 className="text-2xl font-bold">Hello World</h1>
      <Button>Click me</Button>
    </div>
  )
}
6

Start Development Server

Start the local development server to view your app.

npm run dev
💡Visit http://localhost:3000 in your browser

Found this guide helpful? Check out more tools and guides.

Browse All Guides