React 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>React 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;
  }
  .option{
    background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:8px;
    padding:16px;
    margin-bottom:12px;
  }
  .option-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
  }
  .option-name{
    font-weight:600;
    font-size:0.95rem;
    color:#fff;
  }
  .stars{
    font-size:0.75rem;
    color:#94a3b8;
    background:rgba(255,255,255,0.05);
    padding:2px 8px;
    border-radius:4px;
  }
  .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;
  }
  .option-desc{
    font-size:0.8rem;
    color:#94a3b8;
    margin-top:6px;
  }
  .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 .folder{color:#3b82f6}
  .tree .comment{color:#64748b;font-style:italic}
  .checklist{
    list-style:none;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px 16px;
    margin-bottom:16px;
  }
  .checklist li{
    font-size:0.82rem;
    color:#e2e8f0;
  }
  .checklist li::before{
    content:"\2713 ";
    color:#22d3ee;
    font-weight:700;
    margin-right:4px;
  }
  .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>React Admin Dashboard Starter</h1>
  <p class="subtitle">Three approaches compared &mdash; pick the one that fits your stack.</p>

  <div class="section-title">Options</div>

  <div class="option">
    <div class="option-header">
      <span class="option-name">react-admin</span>
      <span class="stars">26.6k stars</span>
    </div>
    <div class="option-desc">Full-featured admin framework with data providers, auth, CRUD views, and theming.</div>
    <div class="cli">npx create-react-admin my-admin</div>
  </div>

  <div class="option">
    <div class="option-header">
      <span class="option-name">Refine</span>
      <span class="stars">34k stars</span>
    </div>
    <div class="option-desc">Headless admin framework &mdash; bring your own UI (Ant Design, Material UI, Mantine, shadcn).</div>
    <div class="cli">npm create refine-app@latest my-admin</div>
  </div>

  <div class="option">
    <div class="option-header">
      <span class="option-name">shadcn-admin</span>
      <span class="stars">11.6k stars</span>
    </div>
    <div class="option-desc">Community-driven dashboard built on shadcn/ui. No framework lock-in &mdash; you own every line.</div>
    <div class="cli">git clone https://github.com/satnaing/shadcn-admin.git</div>
  </div>

  <div class="section-title">shadcn-admin Folder Structure</div>
  <div class="tree">
    <span class="folder">src/</span><br/>
    &nbsp;&nbsp;<span class="folder">pages/</span><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;<span class="folder">dashboard/</span> <span class="comment"># Overview, analytics</span><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;<span class="folder">tasks/</span> <span class="comment"># Data table with filters</span><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;<span class="folder">settings/</span> <span class="comment"># Profile, appearance</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;&nbsp;&nbsp;<span class="folder">layout/</span> <span class="comment"># Sidebar, header, breadcrumbs</span><br/>
  </div>

  <div class="section-title">Key Features</div>
  <ul class="checklist">
    <li>Data Table</li>
    <li>Charts (Recharts)</li>
    <li>Sidebar Navigation</li>
    <li>Auth Module</li>
    <li>Dark / Light Mode</li>
    <li>Responsive Layout</li>
  </ul>

  <div class="links">
    <a href="https://marmelab.com/react-admin/" target="_blank" rel="noopener">react-admin</a>
    <a href="https://refine.dev/" target="_blank" rel="noopener">Refine</a>
    <a href="https://github.com/satnaing/shadcn-admin" target="_blank" rel="noopener">shadcn-admin</a>
  </div>
</div>
</body>
</html>

Three battle-tested approaches to scaffold a React admin dashboard, each with different trade-offs between speed, flexibility, and built-in features.

Option 1 — react-admin (26.6k stars)

Full-featured admin framework with data providers, auth, CRUD views, and theming out of the box.

npx create-react-admin my-admin
cd my-admin && npm run dev

What you get: REST/GraphQL data providers, list/edit/create views, auth module, i18n, theming.

When to use: You need a complete admin framework with minimal custom UI work. Best for CRUD-heavy backends with REST or GraphQL APIs.

Reference: react-admin

Option 2 — Refine (34k stars)

Headless admin framework that lets you bring your own UI library (Ant Design, Material UI, Mantine, or shadcn).

npm create refine-app@latest my-admin
cd my-admin && npm run dev

What you get: Headless data hooks, routing integration (React Router / Next.js), auth provider, access control, audit log.

When to use: You want full control over your UI while getting powerful data-fetching and auth abstractions. Ideal when you need to integrate with an existing design system.

Reference: Refine

Option 3 — shadcn-admin (11.6k stars)

A community-driven admin dashboard built entirely on shadcn/ui components. Not a framework, but a reference implementation you own.

git clone https://github.com/satnaing/shadcn-admin.git
cd shadcn-admin && npm install && npm run dev

What you get: A complete, customizable dashboard with the following structure:

src/
  pages/
    dashboard/       # Overview, analytics
    tasks/           # Data table with filters
    settings/        # Profile, appearance
  components/
    ui/              # shadcn/ui primitives
    layout/          # Sidebar, header, breadcrumbs

When to use: You want a starting point you fully own, with no framework lock-in. Perfect for teams already using shadcn/ui who want a head start on layout, navigation, and common patterns.

Reference: satnaing/shadcn-admin

Feature comparison

Feature	react-admin	Refine	shadcn-admin
Data Table	Built-in	Headless hooks	TanStack Table
Charts	Add-on	Add-on	Recharts
Sidebar Nav	Built-in	Bring your own	Built-in
Auth	Built-in provider	Built-in provider	Template code
Dark Mode	Theme toggle	Bring your own	Built-in
Lock-in	Medium	Low	None