Back to projects
ShadCN UI Dashboard in Next.js

ShadCN UI Dashboard in Next.js

Magda Gozdalik/ 15 February 2025

This project is deployed on Vercel.

Visit shadcn-dashboard

Features Implemented

🔹 ShadCN UI Integration

  • Looked at various components provided by ShadCN.
  • Used the ShadCN CLI to add components to the app.
  • Built an example dashboard using ShadCN components.

🎨 Theming with next-themes

  • Implemented both light/dark and custom themes.
  • Extended the theme using CSS variables to bring in additional customization options.

📌 Dashboard UI Implementation

  • Created a dashboard page using ShadCN components.
  • Added MainNav to the dashboard.
  • Used cn function from ShadCN to handle Tailwind classes dynamically.
  • Installed clsx to conditionally join class names.
  • Used twMerge to merge Tailwind classes and prevent conflicts (twMerge(clsx(inputs))).

Getting Started

🛠️ Installation

First, install dependencies:

npm install
# or
yarn install
# or
pnpm install
# or
bun install

🚀 Running the Development Server

To start the project, run:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Then, open http://localhost:3000 in your browser.

Deployment

The easiest way to deploy a Next.js app is with Vercel.

For more details, check out the Next.js deployment documentation.

📚 Learn More

To learn more about Next.js and ShadCN UI: