ShadCN

This guide walks you through setting up a Next.js project with Shadcn components, using TypeScript and Tailwind CSS.

Introduction

By the end of this guide, you will have a fully configured Next.js project that includes a custom design system powered by Shadcn.

Step 1: Install and Configure Next.js

Create a New Project

Begin by creating a new Next.js project using the create-next-app CLI with TypeScript, Tailwind CSS, and ESLint:

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

This command initializes a new Next.js project with the specified configurations.

Step 2: Initialize Shadcn

Run the Shadcn Init Command

Next, set up your project with Shadcn by running the following command:

npx shadcn-ui@latest init

This command will walk you through the configuration process for Shadcn.

Step 3: Configure components.json

During the initialization process, you’ll be prompted with a few questions to set up components.json. Below are the recommended configurations:

• 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

These settings will configure the base style for your project.

Step 4: Font Configuration

Import and Configure Inter Font

Inter is used as the default font for Shadcn components. Here’s how to configure it in your Next.js project.

1. Import the Font in the Root Layout:

In your layout.tsx, import the Inter font and configure it:

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
        )}
      >
        ...
      </body>
    </html>
  );
}

2. Configure theme.extend.fontFamily in tailwind.config.js:

Extend the default Tailwind CSS configuration to include the Inter font:

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],
      },
    },
  },
};

This ensures that the Inter font is correctly applied throughout your project.

Step 5: Project Structure

Below is a recommended project structure for organizing your Next.js app with Shadcn:

.
├── 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

Key Points:

• UI Components: Place reusable UI components in the components/ui folder.

• Other Components: Non-UI components like <PageHeader /> and <MainNav /> should be placed in the components folder.

• Utility Functions: Place utility functions in the lib folder. For example, utils.ts can house helper functions like cn.

• Global CSS: Store global styles in the styles/globals.css file.

Step 6: Adding Components

You can now start adding components to your project. For example, to add a Button component, run:

npx shadcn-ui@latest add button

This command adds the Button component to your project, which you can import and use as follows:

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

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

PreviousGetting Started NextGetting started with Next.js

Last updated 8 months ago

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 )} > ... </body> </html> ); }

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], }, }, }, };

. ├── 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