Next.js Admin Dashboard Starter

Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Next.js Admin Dashboard Starter</title>
<style>
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  body{
    font-family:system-ui,-apple-system,sans-serif;
    background:#0a0a0f;
    color:#e2e8f0;
    padding:24px;
    line-height:1.6;
  }
  .card{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    padding:28px;
    max-width:720px;
    margin:0 auto;
  }
  h1{
    font-size:1.5rem;
    font-weight:700;
    margin-bottom:4px;
    color:#fff;
  }
  .subtitle{
    color:#94a3b8;
    font-size:0.875rem;
    margin-bottom:24px;
  }
  .section-title{
    font-size:0.75rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:#22d3ee;
    margin-bottom:12px;
    margin-top:24px;
  }
  .setup-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:16px;
  }
  .setup-option{
    background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:8px;
    padding:14px;
  }
  .setup-label{
    font-size:0.7rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:#3b82f6;
    margin-bottom:6px;
  }
  .setup-name{
    font-weight:600;
    font-size:0.9rem;
    color:#fff;
    margin-bottom:4px;
  }
  .setup-desc{
    font-size:0.78rem;
    color:#94a3b8;
  }
  .cli{
    font-family:'SF Mono',SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;
    font-size:0.8rem;
    background:rgba(34,211,238,0.08);
    color:#22d3ee;
    padding:8px 12px;
    border-radius:6px;
    margin-top:8px;
    overflow-x:auto;
    white-space:nowrap;
  }
  .tree{
    font-family:'SF Mono',SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;
    font-size:0.78rem;
    color:#94a3b8;
    background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:8px;
    padding:14px 18px;
    line-height:1.7;
    margin-bottom:16px;
  }
  .tree .group{color:#22d3ee}
  .tree .folder{color:#3b82f6}
  .tree .file{color:#e2e8f0}
  .tree .comment{color:#64748b;font-style:italic}
  .patterns{
    list-style:none;
    margin-bottom:16px;
  }
  .patterns li{
    font-size:0.82rem;
    color:#e2e8f0;
    padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,0.04);
    display:flex;
    gap:10px;
    align-items:baseline;
  }
  .patterns li:last-child{border-bottom:none}
  .pattern-key{
    font-weight:600;
    color:#22d3ee;
    white-space:nowrap;
    min-width:140px;
  }
  .pattern-val{color:#94a3b8}
  .links{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,0.06);
  }
  .links a{
    font-size:0.78rem;
    color:#3b82f6;
    text-decoration:none;
    padding:4px 10px;
    border:1px solid rgba(59,130,246,0.3);
    border-radius:6px;
    transition:background 0.2s;
  }
  .links a:hover{background:rgba(59,130,246,0.1)}
</style>
</head>
<body>
<div class="card">
  <h1>Next.js Admin Dashboard Starter</h1>
  <p class="subtitle">App Router + shadcn/ui + Server Components &mdash; Vercel-ready.</p>

  <div class="section-title">Quick Start</div>
  <div class="setup-grid">
    <div class="setup-option">
      <div class="setup-label">Option A</div>
      <div class="setup-name">Vercel Template</div>
      <div class="setup-desc">One-click deploy from the Vercel dashboard, then clone locally.</div>
    </div>
    <div class="setup-option">
      <div class="setup-label">Option B</div>
      <div class="setup-name">Community Starter</div>
      <div class="setup-desc">Kiranism/next-shadcn-dashboard-starter (6.2k stars)</div>
      <div class="cli">git clone ...next-shadcn-dashboard-starter</div>
    </div>
  </div>

  <div class="section-title">Route Groups &mdash; Folder Structure</div>
  <div class="tree">
    <span class="folder">app/</span><br/>
    &nbsp;&nbsp;<span class="group">(auth)/</span><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;<span class="folder">login/</span><span class="file">page.tsx</span> <span class="comment"># /login</span><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;<span class="folder">register/</span><span class="file">page.tsx</span> <span class="comment"># /register</span><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;<span class="file">layout.tsx</span> <span class="comment"># Centered card, no sidebar</span><br/>
    &nbsp;&nbsp;<span class="group">(dashboard)/</span><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;<span class="file">page.tsx</span> <span class="comment"># / (dashboard home)</span><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;<span class="folder">analytics/</span><span class="file">page.tsx</span> <span class="comment"># /analytics</span><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;<span class="folder">users/</span><span class="file">page.tsx</span> <span class="comment"># /users</span><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;<span class="folder">settings/</span><span class="file">page.tsx</span> <span class="comment"># /settings</span><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;<span class="file">layout.tsx</span> <span class="comment"># Sidebar + header layout</span><br/>
    &nbsp;&nbsp;<span class="folder">components/</span><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;<span class="folder">ui/</span> <span class="comment"># shadcn/ui primitives</span><br/>
    &nbsp;&nbsp;<span class="file">layout.tsx</span> <span class="comment"># Root layout (providers, fonts)</span><br/>
  </div>

  <div class="section-title">Key Patterns</div>
  <ul class="patterns">
    <li><span class="pattern-key">Server Components</span><span class="pattern-val">Fetch data on the server &mdash; no client-side waterfalls</span></li>
    <li><span class="pattern-key">Route Groups</span><span class="pattern-val">Separate auth/dashboard layouts without affecting URLs</span></li>
    <li><span class="pattern-key">Parallel Routes</span><span class="pattern-val">Modal overlays via @modal slot convention</span></li>
    <li><span class="pattern-key">Middleware</span><span class="pattern-val">Auth redirects before any rendering occurs</span></li>
    <li><span class="pattern-key">shadcn/ui</span><span class="pattern-val">Consistent, accessible component primitives</span></li>
  </ul>

  <div class="links">
    <a href="https://vercel.com/templates/next.js/admin-dashboard" target="_blank" rel="noopener">Vercel Template</a>
    <a href="https://github.com/Kiranism/next-shadcn-dashboard-starter" target="_blank" rel="noopener">Community Starter</a>
    <a href="https://nextjs.org/docs/app/building-your-application/routing/route-groups" target="_blank" rel="noopener">Route Groups Docs</a>
  </div>
</div>
</body>
</html>

A Next.js admin dashboard leveraging the App Router’s layout system, server components for data loading, and route groups to cleanly separate auth and dashboard concerns.

Quick Start

Option A: Vercel template (one-click deploy)

Deploy the official Vercel admin template directly from the dashboard, then clone the generated repo locally.

Reference: Vercel Admin Dashboard Template

Option B: Community starter (6.2k stars)

git clone https://github.com/Kiranism/next-shadcn-dashboard-starter.git
cd next-shadcn-dashboard-starter
npm install && npm run dev

App Router Layout Groups

The key architectural pattern is using route groups to apply different layouts without affecting the URL structure:

app/
  (auth)/
    login/page.tsx        # /login
    register/page.tsx     # /register
    layout.tsx            # Centered card layout, no sidebar
  (dashboard)/
    page.tsx              # / (dashboard home)
    analytics/page.tsx    # /analytics
    users/page.tsx        # /users
    settings/page.tsx     # /settings
    layout.tsx            # Sidebar + header layout
  layout.tsx              # Root layout (providers, fonts)

(auth)/layout.tsx renders a minimal centered layout for login/register flows.
(dashboard)/layout.tsx renders the sidebar, header, and breadcrumb navigation.
Neither group name appears in the URL.

Server Components for Data Loading

Server components let you fetch data directly in the component without client-side state management:

// app/(dashboard)/users/page.tsx — runs on the server
export default async function UsersPage() {
  const users = await db.user.findMany();
  return <DataTable columns={columns} data={users} />;
}

No loading spinners, no useEffect, no client-side fetch. The HTML streams to the browser with data already rendered.

Key Patterns

Route Groups for separate auth/dashboard layouts
Server Components for zero-waterfall data loading
Parallel Routes for modal overlays (@modal slot)
Middleware for auth redirects before rendering
shadcn/ui for consistent, accessible components

References

Vercel Admin Template
Kiranism/next-shadcn-dashboard-starter (6.2k stars)
Next.js Route Groups Docs