Installation

How to install dependencies and structure your app.

New Project

Run the following command to create a new Next.js project using the next-template template:

npx create-next-app -e https://github.com/shadcn/next-template

Existing Project

The first step is to install Tailwind CSS. You can do this by running the following command:

npm install -D tailwindcss postcss autoprefixer

Follow the official guide to install Tailwind CSS in your project.

Add dependencies

Next add the following dependencies:

npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react

See this tweet to learn more about I use Tailwind CSS with Next.js.

Path Aliases

I use the @ alias to make it easier to import components. This is how I configure it in tsconfig.json:

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

Configure tailwind.config.js

Here's what my tailwind.config.js file looks like:

const { fontFamily } = require("tailwindcss/defaultTheme")
 
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class", '[data-theme="dark"]'],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

Icons

I use icons from Lucide. You can use any icon library you want.

Add a cn helper

I use a cn helper to make it easier to conditionally add Tailwind CSS classes. Here's how I define it in lib/utils.ts:

import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

That's it. You can now copy and paste components into components/ui. Then use them into your project.

App structure

And here's how I structure my app. I use Next.js, but this is not required.

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

I place the UI components in the components/ui folder.
The rest of the components such as <PageHeader /> and <MainNav /> are placed in the components folder.
The lib folder contains all the utility functions. I have a utils.ts where I define the cn helper.
The styles folder contains the global CSS.

Introduction Typography