How to Install shadcn in a Next.js Project: Step-by-Step Guide

Sep 20, 2024Andry Dina

Introduction

Installation may seem difficult, but this guide will walk you through each step for a smooth installation. It offers powerful, pre-built components that save time while maintaining an elegant, consistent design.

Shadcn is a great addition to a project. Its flexible styles and features make it stand out. Its customizable components and easy-to-understand documentation have changed the way we develop websites.

Step 1: Create a New Next.js Project

If you use Typescript, you can create one with the following command:

To begin, create a new Next.js project with built-in TypeScript, Tailwind CSS, and ESLint configuration:

1npx create-next-app@latest my-shadcn-app --typescript --tailwind --eslint

Then, navigate to your project directory:

1cd my-shadcn-app

If you don't need Typescript, you can use the following command and follow the prompts:

First things first, if you’re starting from scratch, creating a new Next.js project is quick and easy. Just run:

1npx create-next-app@latest my-shadcn-app

Navigate to your project directory:

1cd my-shadcn-app

This command sets up a new project with the essential tools to build a robust application. Already have a project? No problem! Just ensure it’s up to date to make sure everything runs smoothly.

Step 2: Initialize and Configure shadcn

To start using shadcn, initialize the library in your project. . Don’t worry, it’s a breeze:

1npx shadcn-ui@latest init

This command will guide you through configuring components.json to set up the base style, color, and CSS variables. Choose your preferred options, such as the default style, base color (like Slate), and whether or not to use CSS variables.

Tip: Select the elements you want to use in your code by answering a few questions about your project structure and configuring the components.json file.

Step 3: Configure Font and Tailwind CSS

By default, shadcn uses the Inter font, which you can replace with any other font of your choice. To configure Inter:

1import '@/styles/globals.css'
2
3import { Inter as FontSans } from 'next/font/google'
4
5import { cn } from '@/lib/utils'
6
7const fontSans = FontSans({
8  subsets: ['latin'],
9  variable: '--font-sans',
10})
11
12export default function RootLayout({ children }: { children: React.ReactNode }) {
13  return (
14    <html lang='en' suppressHydrationWarning>
15      <head />
16      <body
17        className={cn(
18          'min-h-screen bg-background font-sans antialiased',
19          fontSans.variable
20        )}
21      >
22        ...
23      </body>
24    </html>
25  )
26}

Update your tailwind.config.js to extend the theme with the new font:

1const { fontFamily } = require('tailwindcss/defaultTheme')
2/** @type {import('tailwindcss').Config} */
3
4module.exports = {
5  darkMode: ['class'],
6  content: ['app/**/*.{ts,tsx}', 'components/**/*.{ts,tsx}'],
7  theme: {
8    extend: {
9      fontFamily: {
10        sans: ['var(--font-sans)', ...fontFamily.sans],
11      },
12    },
13  },
14}

Great news! You can now run the npm run dev command to see a preview of the home page. While you won't see any changes yet, you'll be able to install the components you want to use very soon!

Your globals.cssfile will update like this:

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

For more information, you can customize your theme with the copy paste from this link : Shadcn Theme

Step 4: Organize Your Project Structure

Use this structure for your project before using and installing the components. It is well organized and will simplify your development process:

1├ my-shadcn-app
2...
3├── app
4│   ├── layout.tsx
5│   └── page.tsx
6├── components
7│   ├── ui
8│   │   ├── alert-dialog.tsx
9│   │   ├── button.tsx
10│   │   ├── dropdown-menu.tsx
11│   │   └── ...
12│   ├── main-nav.tsx
13│   ├── page-header.tsx
14│   └── ...
15├── lib
16│   └── utils.ts
17├── styles
18│   └── globals.css
19├── next.config.js
20├── package.json
21├── postcss.config.js
22├── tailwind.config.js
23└── tsconfig.json

UI Components: Store all UI components under components/ui.
Other Components: General components like <MainNav /> and <PageHeader /> can be placed in the main components folder.
Utilities: All utility functions go into the lib folder.

Step 5: Add and Use Components

With Tailwind CSS configured, you can now use shadcn components. Import the necessary components into your files:

1import { Link } from 'shadcn';

Then, use these components in your React pages or components:

1export default function Page() {
2   return (
3      <div>
4        <Link href='https://shadcn.com'>Click here</Link>
5      </div>
6    )
7  }

Conclusion

Congratulations on successfully installing shadcn! By completing these steps, you've created a powerful development environment for building sleek and user-friendly interfaces. Continue experimenting with the components to maximize their capabilities and enhance your projects.

Hesitate to try different approaches and tailor your setup to suit your particular requirements. Enjoy creating with shadcn and Next.js!