Setting Up a Next.js Project with shadcn A Step-by-Step Guide

Next.js is a powerful framework that allows developers to create scalable web applications with React. Today, we'll explore how to install and configure a Next.js project using shadcn to quickly initialize and customize our setup. Let's dive right in.

1. Create Your Project

To begin, we need to initialize a new Next.js project or set up an existing one. We use shadcn, a handy tool for configuring components and styles.

Run the following command to get started:

npx shadcn@latest init

Alternatively, for a quicker setup with default values, you can add the -d flag. This will automatically select New York for styles, Zinc as the base color, and yes for using CSS variables:

npx shadcn@latest init -d

2. Configure `components.json`

During the initialization process, shadcn will ask you a few questions to configure components.json:

Which style would you like to use? Select New York.
Which color would you like to use as the base color? Choose Zinc.
Do you want to use CSS variables for colors? Choose yes if you prefer flexibility with color theming.

These configurations allow you to customize the appearance of your components from the very start.

3. Adding Components

Once the project setup is complete, you can start adding components to your project. For example, to add a button component, run the following command:

npx shadcn@latest add button

This command will add a pre-built button component to your project. You can then import it as follows:

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

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

4. Component Installation Guide

Below is a table summarizing the installation and usage of various components available with shadcn:

Component	Installation Command	Usage Example
Accordion	`npx shadcn@latest add accordion`	Import and use `Accordion`, `AccordionContent`, `AccordionItem`, `AccordionTrigger` from `@/components/ui/accordion`
Alert	`npx shadcn@latest add alert`	Similar to Accordion, import from respective path
Alert Dialog	`npx shadcn@latest add alert-dialog`	Import Alert Dialog components for modal alerts
Aspect Ratio	`npx shadcn@latest add aspect-ratio`	Use to maintain image or video ratios
Avatar	`npx shadcn@latest add avatar`	Use for displaying user profile images
Badge	`npx shadcn@latest add badge`	Import `Badge` component for labels or tags
Breadcrumb	`npx shadcn@latest add breadcrumb`	Navigation component for displaying path hierarchy
Button	`npx shadcn@latest add button`	As shown in the example above
Calendar	`npx shadcn@latest add calendar`	Import `Calendar` for date picking functionalities
Card	`npx shadcn@latest add card`	Display grouped content in card format
Carousel	`npx shadcn@latest add carousel`	Use for adding image slideshows
Chart	`npx shadcn@latest add chart`	Visual representation of data
Checkbox	`npx shadcn@latest add checkbox`	Import `Checkbox` for boolean options
Collapsible	`npx shadcn@latest add collapsible`	Toggle between showing and hiding content
Combobox	`npx shadcn@latest add combobox`	Enhanced select dropdown
Command	`npx shadcn@latest add command`	Input for command-like functionalities
Context Menu	`npx shadcn@latest add context-menu`	Add right-click context menu
Data Table	`npx shadcn@latest add data-table`	Display tabular data
Date Picker	`npx shadcn@latest add date-picker`	Import `DatePicker` for date selection
Dialog	`npx shadcn@latest add dialog`	Pop-up modal dialogs
Drawer	`npx shadcn@latest add drawer`	Side panel components
Dropdown Menu	`npx shadcn@latest add dropdown-menu`	Dropdown menus for actions
Form	`npx shadcn@latest add form`	User input forms
Hover Card	`npx shadcn@latest add hover-card`	Display additional info on hover
Input	`npx shadcn@latest add input`	Basic input fields
Input OTP	`npx shadcn@latest add input-otp`	Input fields for OTPs
Label	`npx shadcn@latest add label`	Form labels
Menubar	`npx shadcn@latest add menubar`	Menubar for navigation
Navigation Menu	`npx shadcn@latest add navigation-menu`	Multi-level navigation menu
Pagination	`npx shadcn@latest add pagination`	Pagination component
Popover	`npx shadcn@latest add popover`	Contextual pop-up info
Progress	`npx shadcn@latest add progress`	Progress bars
Radio Group	`npx shadcn@latest add radio-group`	Radio button groups
Resizable	`npx shadcn@latest add resizable`	Resizable container components
Scroll Area	`npx shadcn@latest add scroll-area`	Scrollable container areas
Select	`npx shadcn@latest add select`	Dropdown select menus
Separator	`npx shadcn@latest add separator`	Horizontal or vertical dividers
Sheet	`npx shadcn@latest add sheet`	Side sheets
Skeleton	`npx shadcn@latest add skeleton`	Loading placeholders
Slider	`npx shadcn@latest add slider`	Range sliders
Sonner	`npx shadcn@latest add sonner`	Notification component
Switch	`npx shadcn@latest add switch`	Toggle switches
Table	`npx shadcn@latest add table`	Display tabular data
Tabs	`npx shadcn@latest add tabs`	Tabbed navigation
Textarea	`npx shadcn@latest add textarea`	Multi-line input fields
Toast	`npx shadcn@latest add toast`	Notifications and alerts
Toggle	`npx shadcn@latest add toggle`	Toggle buttons
Toggle Group	`npx shadcn@latest add toggle-group`	Grouped toggle buttons
Tooltip	`npx shadcn@latest add tooltip`	Tooltips for extra information

Conclusion

With these simple steps, you can quickly initialize a Next.js project with shadcn and add components that match your preferred design system. This allows you to rapidly build visually cohesive web applications without getting bogged down in initial configuration details.