Skip to content

# Installation

Step-by-step guide to getting Zenith Dashboard running on your local machine.

## Prerequisites

Before you begin, make sure you have the following installed:

- Node.js 20.9+ — Download Node.js
- npm, yarn, or pnpm— npm ships with Node.js; yarn and pnpm are optional alternatives
- Git— for cloning the repository

## Step 1: Clone the Repository

    git clone https://github.com/colorlib/zenith-dashboard.git
    cd zenith-dashboard

## Step 2: Install Dependencies

Use your preferred package manager:

### npm

    npm install

### yarn

    yarn

### pnpm

    pnpm install

## Step 3: Run the Dev Server

    npm run dev

The development server starts at `http://localhost:3737`. Next.js hot-reloads your changes automatically so you can see updates in real time.

## Step 4: Build for Production

When you are ready to deploy, create an optimized production build:

    npm run build
    npm run start

`npm run build` compiles and optimizes the application. `npm run start` serves the built output on port 3000.

## Available Scripts

Command | Description
--- | ---
`npm run dev` | Start development server with hot reload
`npm run build` | Create optimized production build
`npm run start` | Serve the production build
`npm run lint` | Run ESLint across the project
`npm run test` | Run Vitest unit tests in watch mode
`npm run test:run` | Run Vitest unit tests once (CI-friendly)
`npm run test:e2e` | Run Playwright end-to-end tests
`npm run test:e2e:ui` | Open Playwright interactive UI mode
`npm run storybook` | Launch Storybook component browser on port 6006
`npm run build-storybook` | Build static Storybook for deployment
`npm run analyze` | Run production build with bundle analyzer report

## Seed / Starter Version

If you prefer a clean starting point without demo pages and mock data, use the `seed/` directory. It includes all infrastructure (theming, i18n, layouts, 33 UI components, Storybook and Vitest configs) with just two routes: Dashboard and Settings.

    cd seed
    npm install
    npm run dev

See the Seed/Starter Guide for complete details.

## Next Steps

Now that you have the project running, explore the Folder Structure to understand how the codebase is organized.