Shadcn UI Quick Install for Next.js

Want to give your Next.js project a stylish, modern look? This guide will walk you through the process of installing and integrating Shadcn UI, helping you achieve a polished and professional appearance for your app. Let’s get started!

How to Add Shadcn UI in Laravel Inertia React

How to Use Shadcn UI in a React App

1. Install and Configure Next.js

Create a New Project

Begin by creating a new Next.js project using create-next-app:

npx create-next-app@latest my-app --typescript --tailwind --eslint
# or 
yarn create next-app@latest my-app --typescript --tailwind --eslint
# or
pnpm create next-app@latest my-app --typescript --tailwind --eslint
# or
bunx --bun create-next-app@latest my-app --typescript --tailwind --eslint

Run the Shadcn UI CLI

Set up your project by running the shadcn-ui init command:

npx shadcn-ui@latest init

Configure components.json

You’ll be prompted to answer a few questions to configure components.json:

Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Do you want to use CSS variables for colors? › no / yes

2. Set Up Fonts

While not required, this guide uses Inter as the default font. Here’s how to configure it for Next.js:

Import the Font in the Root Layout

In your root layout file, add the following:

import "@/styles/globals.css"
import { Inter as FontSans } from "next/font/google"
import { cn } from "@/lib/utils"

const fontSans = FontSans({
  subsets: ["latin"],
  variable: "--font-sans",
})

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body
        className={cn(
          "min-h-screen bg-background font-sans antialiased",
          fontSans.variable
        )}
      >
        {children}
      </body>
    </html>
  )
}

Configure Tailwind

Update your tailwind.config.js file:

const { fontFamily } = require("tailwindcss/defaultTheme")

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
    },
  },
}

3. App Structure

Here’s a recommended structure for your Next.js app:

.
├── app
│   ├── layout.tsx
│   └── page.tsx
├── components
│   ├── ui
│   │   ├── alert-dialog.tsx
│   │   ├── button.tsx
│   │   ├── dropdown-menu.tsx
│   │   └── ...
│   ├── main-nav.tsx
│   ├── page-header.tsx
│   └── ...
├── lib
│   └── utils.ts
├── styles
│   └── globals.css
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json

Place UI components in the components/ui folder.
Other components like <PageHeader /> and <MainNav /> go in the components folder.

The lib folder contains utility functions, including utils.ts with the cn helper.
Global CSS resides in the styles folder.

4. Adding Components

You’re now ready to add components to your project. For example, to add the Button component:

npx shadcn-ui@latest add button

You can then import and use the component in your project:

import { Button } from "@/components/ui/button";

export default function Home() {
  return (
    <>
      <div className="container mx-auto">
        <h1 className="font-bold text-3xl">Add Shadcn UI In NextJS </h1>
        <Button>Read More</Button>
      </div>
    </>
  );
}

And that’s it! You’ve successfully integrated Shadcn UI into your Next.js project. Enjoy building your stylish and modern application!