admin-dashboard-template — Next.js 后台模板

SHA-256: 372ea74b70cabe4a7e38eb32cb6beb1d0fede9ae709759515589dd4af4063682

2026-10-01T01:39:10.737Z

# Helios Pro - Free Next.js Admin Dashboard Template

[![Next.js](https://img.shields.io/badge/Next.js-16-black?style=for-the-badge&logo=nextdotjs)](https://nextjs.org/)
[![React](https://img.shields.io/badge/React-19-149eca?style=for-the-badge&logo=react&logoColor=white)](https://react.dev/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-v4-38bdf8?style=for-the-badge&logo=tailwindcss&logoColor=white)](https://tailwindcss.com/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5-3178c6?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![License: MIT](https://img.shields.io/badge/License-MIT-22c55e?style=for-the-badge)](./LICENSE)

Helios Pro is a free Next.js admin dashboard template for developers building modern SaaS dashboards, ecommerce admin panels, CRM tools, analytics portals, internal tools, and production-ready web apps.

It includes a polished App Router setup, 100+ pages, responsive layouts, charts, data tables, ecommerce screens, auth pages, settings, profiles, and reusable UI components built with Next.js, React, TypeScript, and Tailwind CSS.

<p align="center">
  <a href="https://www.mtverse.dev/preview/helios-pro">
    <img alt="Helios Pro free Next.js admin dashboard template preview" src="https://pub-59d1b450736b455084e9eebc2ed27f14.r2.dev/templates/dashboard-previews/helios-pro/Screenshot-2026-06-29-191003-6730647041.png" width="100%">
  </a>
</p>

## Live Preview

- MTVerse preview: https://www.mtverse.dev/preview/helios-pro
- Template page: https://www.mtverse.dev/templates/helios-pro
- More templates: https://www.mtverse.dev/templates

## Why Helios Pro?

Helios Pro is designed as a serious starting point for real products, not a tiny demo shell. It gives you the pages and UI patterns usually needed in dashboards from day one: navigation, analytics cards, charts, tables, ecommerce workflows, profile pages, settings, auth flows, error pages, theme controls, and responsive behavior.

Use it for:

- Free Next.js admin dashboard projects
- React admin dashboard templates
- SaaS dashboard starter kits
- Ecommerce admin panels
- CRM and sales dashboards
- Analytics and reporting portals
- Internal tools and operations consoles
- Startup MVP admin panels

## Features

- 100+ dashboard, app, ecommerce, auth, table, chart, and UI pages
- 10 dashboard variants for analytics, ecommerce, CRM, finance, SaaS, projects, marketing, AI, support, and logistics
- App Router architecture with route groups for dashboard and standalone pages
- TypeScript-first codebase with clean reusable components
- Tailwind CSS v4 styling and custom design tokens
- Light and dark mode support with next-themes
- Responsive desktop, tablet, and mobile layouts
- ApexCharts-powered dashboards and reporting screens
- jsvectormap geographic visualizations
- Advanced table patterns including sorting, filtering, pagination, selection, sticky headers, editable rows, drag and drop, and empty states
- Ecommerce pages for products, orders, customers, checkout, reviews, coupons, and inventory
- Auth screens for sign in, sign up, forgot password, reset password, two-step verification, lock screen, side layouts, and boxed layouts
- Settings, profile, team, roles, permissions, billing, notifications, connected apps, and activity pages
- Production-friendly project structure for fast customization

## What You Get

| Surface | Included pages |
| --- | --- |
| Dashboards | Analytics, ecommerce, CRM, finance, SaaS, projects, marketing, AI, support, logistics |
| Apps | Email, chat, calendar, kanban, notes, tasks, file manager, contacts, support tickets, invoices |
| Ecommerce | Products, product detail, add/edit product, orders, customers, cart, checkout, reviews, coupons, inventory |
| User and account | Profile, account settings, security, billing, team, roles, permissions, activity, notifications, connected apps |
| Forms | Basic inputs, advanced inputs, selects, checkbox/radio, switches, date picker, upload, rich text, layouts, validation, multi-step, payment form |
| Tables | Basic, data, sorting, filtering, pagination, row selection, editable, sticky, column visibility, drag/drop, empty state |
| Charts | Line, area, bar, pie/doughnut, radar/radial, candlestick, KPI cards, realtime metrics, chart dashboard, reports |
| UI components | Buttons, badges, cards, alerts, avatars, dropdowns, modals, drawers, tabs, accordions, tooltips, popovers, breadcrumbs, pagination, progress, spinners, toasts, timeline, empty states, banners, command menu |
| Pages | Landing, pricing, FAQ, help center, about, contact, maintenance, coming soon, changelog, roadmap |
| Auth | Sign in, sign up, forgot password, reset password, two-step verification, lock screen, side login/register, boxed login/register |
| Errors | 400, 401, 403, 404, 500, 503 |

## Upgrade to Premium MTVerse Dashboards

Helios Pro is free. If you need more specialized dashboard systems, explore these premium MTVerse dashboard templates. All preview buttons below use MTVerse preview pages, and the images use template preview image links.

<table>
  <tr>
    <td align="center" width="50%">
      <a href="https://www.mtverse.dev/preview/pipeline-pilot-production">
        <img src="https://www.mtverse.dev/template-previews/pipeline-pilot-production.png" alt="Pipeline Pilot sales operations dashboard preview" width="100%">
      </a>
      <br>
      <a href="https://www.mtverse.dev/templates/pipeline-pilot-production"><strong>Pipeline Pilot</strong></a>
      <br>
      <sub>Premium sales operations dashboard for CRM pipelines, revenue forecasting, team performance, and deal management.</sub>
    </td>
    <td align="center" width="50%">
      <a href="https://www.mtverse.dev/preview/sentinelgrid">
        <img src="https://www.mtverse.dev/template-previews/sentinelgrid.png" alt="SentinelGrid SRE observability dashboard preview" width="100%">
      </a>
      <br>
      <a href="https://www.mtverse.dev/templates/sentinelgrid"><strong>SentinelGrid</strong></a>
      <br>
      <sub>SRE observability dashboard for incidents, platform health, services, deployments, and DevOps command centers.</sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="50%">
      <a href="https://www.mtverse.dev/preview/planna-dashboard">
        <img src="https://www.mtverse.dev/template-previews/planna-dashboard.png" alt="Planna project management dashboard preview" width="100%">
      </a>
      <br>
      <a href="https://www.mtverse.dev/templates/planna-dashboard"><strong>Planna Dashboard</strong></a>
      <br>
      <sub>Project management dashboard for tasks, team planning, delivery timelines, client workspaces, and productivity flows.</sub>
    </td>
    <td align="center" width="50%">
      <a href="https://www.mtverse.dev/preview/ooster">
        <img src="https://www.mtverse.dev/template-previews/ooster.png" alt="Ooster UX research analytics dashboard preview" width="100%">
      </a>
      <br>
      <a href="https://www.mtverse.dev/templates/ooster"><strong>Ooster</strong></a>
      <br>
      <sub>UX research and product analytics dashboard for heatmaps, usability tests, experiments, insights, and CRO teams.</sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="50%">
      <a href="https://www.mtverse.dev/preview/nexusgrid-premium-admin-dashboard">
        <img src="https://www.mtverse.dev/template-previews/nexusgrid-premium-admin-dashboard.png" alt="NexusGrid premium admin dashboard preview" width="100%">
      </a>
      <br>
      <a href="https://www.mtverse.dev/templates/nexusgrid-premium-admin-dashboard"><strong>NexusGrid</strong></a>
      <br>
      <sub>Premium Next.js admin UI kit for SaaS, ecommerce, CRM, analytics, charts, tables, and product admin systems.</sub>
    </td>
    <td align="center" width="50%">
      <a href="https://www.mtverse.dev/preview/nimbus-pro">
        <img src="https://pub-59d1b450736b455084e9eebc2ed27f14.r2.dev/templates/dashboard-previews/nimbus-pro/Screenshot-2026-06-30-183227-3149009993.png" alt="Nimbus Pro Next.js admin dashboard preview" width="100%">
      </a>
      <br>
      <a href="https://www.mtverse.dev/templates/nimbus-pro"><strong>Nimbus Pro</strong></a>
      <br>
      <sub>Premium SaaS admin dashboard UI kit with ecommerce analytics, dark mode, charts, command palette, and app pages.</sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="50%">
      <a href="https://www.mtverse.dev/preview/mtverse-modular-nextjs-dashboard-template">
        <img src="https://pub-59d1b450736b455084e9eebc2ed27f14.r2.dev/templates/dashboard-previews/mtverse-modular-nextjs-dashboard-template/mtverse-modular-nextjs-dashboard-template-1794492769.png" alt="MTVerse Modular AI SaaS dashboard preview" width="100%">
      </a>
      <br>
      <a href="https://www.mtverse.dev/templates/mtverse-modular-nextjs-dashboard-template"><strong>MTVerse Modular</strong></a>
      <br>
      <sub>AI SaaS dashboard template with modular analytics, ecommerce metrics, CRM views, and modern Next.js UI patterns.</sub>
    </td>
    <td align="center" width="50%">
      <a href="https://www.mtverse.dev/preview/mt-box-enterprise-nextjs-dashboard-template">
        <img src="https://pub-59d1b450736b455084e9eebc2ed27f14.r2.dev/templates/dashboard-previews/mt-box-enterprise-nextjs-dashboard-template/mt-box-enterprise-nextjs-dashboard-template-0406654103.png" alt="MT Box Enterprise SaaS admin dashboard preview" width="100%">
      </a>
      <br>
      <a href="https://www.mtverse.dev/templates/mt-box-enterprise-nextjs-dashboard-template"><strong>MT Box Enterprise</strong></a>
      <br>
      <sub>Enterprise SaaS admin dashboard for RBAC, audit logs, billing, team operations, and business management workflows.</sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="50%" colspan="2">
      <a href="https://www.mtverse.dev/preview/mat-dash-nextjs-admin-dashboard-template">
        <img src="https://pub-59d1b450736b455084e9eebc2ed27f14.r2.dev/templates/dashboard-previews/mat-dash-nextjs-admin-dashboard-template/mat-dash-nextjs-admin-dashboard-template-5590399037.png" alt="Mat Dash Next.js admin dashboard preview" width="100%">
      </a>
      <br>
      <a href="https://www.mtverse.dev/templates/mat-dash-nextjs-admin-dashboard-template"><strong>Mat Dash</strong></a>
      <br>
      <sub>Next.js admin dashboard template for ecommerce admin, invoices, tables, analytics cards, and operational dashboards.</sub>
    </td>
  </tr>
</table>

<p align="center">
  <a href="https://www.mtverse.dev/templates"><strong>View all MTVerse templates</strong></a>
</p>

## Tech Stack

| Area | Technology |
| --- | --- |
| Framework | Next.js 16 App Router |
| UI Runtime | React 19 |
| Language | TypeScript 5 |
| Styling | Tailwind CSS v4 |
| Charts | ApexCharts, react-apexcharts |
| Maps | jsvectormap |
| Dates | flatpickr, dayjs |
| Theme | next-themes |
| Notifications | sonner |
| Auth-ready | better-auth |
| Database-ready | Prisma |

## Quick Start

Clone the repository, install dependencies, and start the local development server.

```bash
npm install
npm run dev
```

Open http://localhost:3000 in your browser.

You can also use Bun:

```bash
bun install
bun run dev
```

## Available Scripts

| Command | Description |
| --- | --- |
| `npm run dev` | Start the local Next.js development server |
| `npm run build` | Create a production build |
| `npm run start` | Start the production server after build |
| `npm run lint` | Run ESLint |
| `npm run db:generate` | Generate Prisma client |
| `npm run db:migrate` | Run Prisma migrations in development |
| `npm run db:studio` | Open Prisma Studio |

## Project Structure

```text
src/
  app/
    (with-layout)/        Dashboard pages with sidebar and topbar shell
      dashboards/         10 dashboard variants
      apps/               Email, chat, calendar, kanban, notes, tasks, files, contacts, tickets, invoices
      ecommerce/          Product, order, customer, cart, checkout, review, coupon, inventory pages
      user-account/       Profile, settings, team, roles, permissions, billing, activity pages
      forms/              Form inputs, layouts, validation, upload, rich text, multi-step forms
      tables/             Data table examples and advanced table patterns
      charts/             Chart pages and reporting dashboards
      ui-components/      Component showcase pages
      pages/              Landing, pricing, FAQ, help, about, contact, changelog, roadmap
    (without-layout)/     Auth and error pages
    api/                  API routes
  components/             Layout, shared, chart, table, form, and UI components
  data/                   Mock datasets used by dashboard pages
  lib/                    Utilities, auth, database, formatting helpers
  css/                    Global styles and Tailwind theme files
public/                   Images, logos, icons, illustrations, and static assets
prisma/                   Prisma schema and database setup
```

## SEO Keywords

Free Next.js admin dashboard template, React admin dashboard template, Tailwind CSS admin dashboard, TypeScript dashboard template, Next.js dashboard UI kit, open source admin template, SaaS dashboard template, ecommerce admin template, CRM dashboard template, analytics dashboard template, responsive admin dashboard, App Router dashboard starter.

## Customization Guide

- Update branding assets in `public/images/logo` and `public/favicon.svg`.
- Edit global theme values in `src/css/style.css`.
- Change dashboard navigation in the layout/sidebar components under `src/components/layouts`.
- Replace mock datasets in `src/data` with your API or database data.
- Connect auth and database flows through `src/lib` and `prisma`.
- Remove pages you do not need before shipping a production app.

## Deployment

Helios Pro can be deployed to any platform that supports Next.js applications.

```bash
npm run build
npm run start
```

Add database and auth environment variables only if you enable those integrations.

## FAQ

### Is Helios Pro free?

Yes. Helios Pro is the free MTVerse Next.js admin dashboard template for the GitHub community.

### Can I use it for commercial projects?

Yes, the included MIT license allows personal and commercial use.

### Does it include backend logic?

The project is frontend-first with Prisma and better-auth readiness. Pages work with demo/mock data and can be connected to your own APIs, database, or auth provider.

### Is this a simple landing page template?

No. It is a complete admin dashboard UI kit with dashboards, apps, ecommerce pages, tables, charts, auth pages, settings, and reusable UI components.

### Can I remove unused pages?

Yes. The App Router structure is modular, so you can remove folders you do not need.

## Contributing

Contributions are welcome. Please read [CONTRIBUTING.md](./CONTRIBUTING.md) before opening pull requests.

## Security

If you find a security issue, please read [SECURITY.md](./SECURITY.md) and report it responsibly.

## License

Helios Pro is released under the [MIT License](./LICENSE).

## About MTVerse

MTVerse creates production-ready templates for founders, developers, SaaS teams, ecommerce builders, and agencies. Browse more templates at https://www.mtverse.dev/templates.