Installation

A guide to setting up your project with the necessary dependencies and structure.

This project is built with Next.js and leverages TypeScript and Tailwind CSS for all its components. Some components also require shadcn/ui and Framer Motion. While we recommend TypeScript for optimal development experience, JavaScript is also supported.

Install Next.js

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

Run the CLI

Run the shadcn-ui init command to setup your project:

npx shadcn-ui@latest init

Configure components.json

You will be asked 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? › Zinc
Do you want to use CSS variables for colors? › no / yes

Add 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:

lib/utils.ts

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

App structure

Here's how I structure my Next.js apps. You can use this as a reference:

page.tsx

layout.tsx

button.tsx

site-header.tsx

site-footer.tsx

utils.ts

globals.css

components.json

next.config.js

package.json

postcss.config.js

tailwind.config.ts

tsconfig.json

I place the UI components shadcn/ui in the components/ui folder.
The rest of the components such as <SiteHeader /> and <SiteFooter /> 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.

That's it

You can now start adding shadcn/ui components to your project.

npx shadcn-ui@latest add button