honestui-dashboard — Next.js 后台模板

SHA-256: 5ce35672762f8c08803b4cfcf5f4040ad295a97ded4beffdd293803fa0c425cb

2026-10-14T23:03:51.415Z

<div align="center">

# Northstar — SaaS Analytics Dashboard

**A free, production-quality Next.js analytics dashboard template. Built with [HonestUI](https://honestui.com).**

Revenue trends, acquisition, a conversion funnel, cohort retention, a filterable
customer table, and recent activity — one polished Overview page wired to typed,
deterministic mock data. No database, no auth, no API keys. Clone it and it runs.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fhonestui%2Fhonestui-dashboard&project-name=northstar-dashboard&repository-name=honestui-dashboard)

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
![Next.js](https://img.shields.io/badge/Next.js-App%20Router-black)
![React](https://img.shields.io/badge/React-19-149eca)
![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-4-38bdf8)

![Northstar dashboard, light mode](.github/assets/dashboard-light.png)

<details>
<summary><strong>Dark mode</strong></summary>

![Northstar dashboard, dark mode](.github/assets/dashboard-dark.png)

</details>

</div>

## Get started

Three ways to use this, pick one:

**1. Use it as a GitHub template** — click
[**Use this template**](https://github.com/honestui/honestui-dashboard/generate)
to create your own repo, then:

```bash
git clone https://github.com/<you>/<your-repo>.git
cd <your-repo>
npm install
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) — it redirects to `/dashboard`.

**2. Deploy it first, code later** — the
[one-click deploy](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fhonestui%2Fhonestui-dashboard&project-name=northstar-dashboard&repository-name=honestui-dashboard)
clones the repo to your GitHub account and puts it live on Vercel in about a minute.

**3. Add the dashboard to an existing app** — the whole dashboard (pages,
sections, data layer) is also distributed as a [shadcn](https://ui.shadcn.com)
block from the HonestUI registry:

```bash
npx shadcn@latest add @honestui/analytics-dashboard
```

## What's inside

- **A complete Overview page** — KPI strip, revenue area chart with metric tabs,
  acquisition bar chart, conversion funnel, cohort retention heatmap, a
  filterable/sortable customer data table, and an activity feed.
- **Real app plumbing** — route-level loading skeletons, an error boundary,
  empty/error chart states, responsive sidebar + mobile sheet navigation, and a
  flash-free dark mode toggle.
- **Typed mock data** — every series, customer, and event lives in
  `lib/dashboard/data.ts` with shapes in `lib/dashboard/types.ts`. Swap in real
  data access and the sections keep working.
- **No second design system** — chart colors, spacing, radii, and typography all
  come from the HonestUI token system (`--hui-*` custom properties) in `styles/`.

## Stack

- Next.js (App Router) + React Server Components
- TypeScript
- Tailwind CSS 4 mapped onto HonestUI tokens
- HonestUI copied components (`components/ui/`) and package collections
  (`honestui/charts`, `honestui/icons`)
- ECharts via the HonestUI chart components
- Static typed mock data — no database, auth, or API

```bash
npm run verify
```

checks the registry snapshot, lint, TypeScript, and a production build.

## How HonestUI is used

HonestUI has two delivery models, and this starter intentionally uses both:

- **Copied components** live in `components/ui/` (Button, Card, Badge, Tabs,
  Select, Sheet, Table, Data Table, Empty, Skeleton, Avatar, Dropdown Menu,
  Toggle Group, …). They are application code you own — the dashboard imports
  them directly rather than recreating primitives.
- **Package collections** stay as imports: charts come from
  `honestui/charts` (AreaChart, BarChart, Heatmap) with
  `honestui/charts.css` loaded once in `app/globals.css`, and icons come from
  `honestui/icons`.

Dark mode uses the existing theme mechanism: `data-theme` on `<html>` for tokens
plus the `dark` class for Tailwind variants and chart themes — see
`components/dashboard/theme-toggle.tsx`.

One ordering detail worth knowing: `honestui/charts.css` is imported **before**
`tailwindcss` in `app/globals.css`, and the cascade layer order is declared at
the top of that file. Both sheets are Tailwind-compiled, so whoever declares
layers first wins.

## Make it yours

| To change… | Edit… |
| --- | --- |
| Dashboard data | `lib/dashboard/data.ts` (series, customers, activity), `lib/dashboard/types.ts` (shapes), `lib/dashboard/format.ts` (formatting) |
| Sections | `components/dashboard/` — one file per section; the page composes them in `app/(app)/dashboard/page.tsx` |
| App shell | Sidebar, mobile navigation, theme toggle, and account menu in `components/dashboard/`; navigation items in `components/dashboard/nav.ts` |
| Charts | Configured inline in each section via the HonestUI `ChartConfig` (per-theme color arrays using `--hui-color-viz-*` tokens) |
| Theme values | `styles/` holds the HonestUI foundation; `app/globals.css` maps Tailwind theme variables onto it |
| Loading / error states | `app/(app)/dashboard/loading.tsx`, `app/(app)/dashboard/error.tsx`, and `components/dashboard/chart-states.tsx` |

The sidebar's other routes (Analytics, Customers, Revenue, Reports, Settings)
render an intentional placeholder — the Overview page is the reference
implementation to copy from.

Add more HonestUI components any time:

```bash
npx honestui@latest add <component>
```

`registry.snapshot.json` records the exact public registry entries installed in
this starter.

## HonestUI

- [honestui.com](https://honestui.com) — components, charts, shaders, icons
- [honestui.com/docs](https://honestui.com/docs)
- [github.com/honestui/honestui](https://github.com/honestui/honestui)

## License

[MIT](LICENSE) — use it for anything, no attribution required.