---
title: "Admin Dashboard"
description: "Get started building your admin dashboard with Vercel's starter, complete with Tailwind CSS, PostgreSQL, and Auth."
url: "https://vercel.com/templates/next.js/admin-dashboard"
links:
  repository: "https://github.com/vercel/nextjs-postgres-nextauth-tailwindcss-template"
  demo: "https://next-admin-dash.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Admin+Dashboard&demo-description=Get+started+building+your+admin+dashboard+with+Vercel%27s+starter%2C+complete+with+Tailwind+CSS%2C+PostgreSQL%2C+and+Auth.&demo-url=https%3A%2F%2Fnext-admin-dash.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2Ffmmsa0AREAIvMGl9PzGew%2Fc3b4fd4674140be0813c0aa21007c381%2FCleanShot_2024-07-07_at_23.45.58_2x.png&project-name=Admin+Dashboard&repository-name=admin-dashboard&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextjs-postgres-nextauth-tailwindcss-template&from=templates&env=POSTGRES_URL%2CAUTH_GITHUB_ID%2CAUTH_GITHUB_SECRET%2CAUTH_SECRET&envDescription=Add+your+PostgreSQL+connection+string+and+GitHub+OAuth+app+details&envLink=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextjs-postgres-nextauth-tailwindcss-template%2Fblob%2Fmain%2F.env.example"
---

# Admin Dashboard

Get started building your admin dashboard with Vercel's starter, complete with Tailwind CSS, PostgreSQL, and Auth.

<div align="center"><strong>Next.js 15 Admin Dashboard Template</strong></div>
<div align="center">Built with the Next.js App Router</div>
<br />
<div align="center">
<a href="https://next-admin-dash.vercel.app/">Demo</a>
<span> · </span>
<a href="https://vercel.com/templates/next.js/admin-dashboard-tailwind-postgres-react-nextjs">Clone & Deploy</a>
<span>
</div>

## Overview

This is a starter template using the following stack:

- Framework - [Next.js (App Router)](https://nextjs.org)
- Language - [TypeScript](https://www.typescriptlang.org)
- Auth - [Auth.js](https://authjs.dev)
- Database - [Postgres](https://vercel.com/postgres)
- Deployment - [Vercel](https://vercel.com/docs/concepts/next.js/overview)
- Styling - [Tailwind CSS](https://tailwindcss.com)
- Components - [Shadcn UI](https://ui.shadcn.com/)
- Analytics - [Vercel Analytics](https://vercel.com/analytics)
- Formatting - [Prettier](https://prettier.io)

This template uses the new Next.js App Router. This includes support for enhanced layouts, colocation of components, tests, and styles, component-level data fetching, and more.

## Getting Started

During the deployment, Vercel will prompt you to create a new Postgres database. This will add the necessary environment variables to your project.

Inside the Vercel Postgres dashboard, create a table based on the schema defined in this repository.

```sql
CREATE TYPE status AS ENUM ('active', 'inactive', 'archived');

CREATE TABLE products (
  id SERIAL PRIMARY KEY,
  image_url TEXT NOT NULL,
  name TEXT NOT NULL,
  status status NOT NULL,
  price NUMERIC(10, 2) NOT NULL,
  stock INTEGER NOT NULL,
  available_at TIMESTAMP NOT NULL
);
```

Then, uncomment `app/api/seed.ts` and hit `http://localhost:3000/api/seed` to seed the database with products.

Next, copy the `.env.example` file to `.env` and update the values. Follow the instructions in the `.env.example` file to set up your GitHub OAuth application.

```bash
npm i -g vercel
vercel link
vercel env pull
```

Finally, run the following commands to start the development server:

```bash
pnpm install
pnpm dev
```

You should now be able to access the application at http://localhost:3000.

## Related Templates

### [Nextra: Docs Starter Kit](https://vercel.com/templates/next.js/documentation-starter-kit)

Simple, powerful and flexible markdown-powered docs site. Built with Next.js.

### [Blog Starter Kit](https://vercel.com/templates/next.js/blog-starter-kit)

A statically generated blog example using Next.js and Markdown.

### [Blog (with comments)](https://vercel.com/templates/next.js/blog-with-comments)

Next.js blog application with Auth0 and Upstash

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.