Next.jsReact后台

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

作者 frankxai

Arcanea Dashboard Template 是一个基于 Next.js App Router 的宇宙风格分析仪表盘模板，内置 6 个液态玻璃组件、6 个动效原语和模拟数据，无需后端即可运行。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图

桌面端首页1 / 3

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-14查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

内置 6 个仪表盘组件：4 个 StatCard、RevenueChart、TrafficDonut、TopProducts、FunnelCard、ActivityFeed

components/motion/ 提供 6 个动效原语：LiquidGlass、SplitText、Reveal、GradientMesh、NumberTicker、GlowCard

README 说明无需环境变量，使用内置模拟数据即可运行

技术栈为 Next.js App Router、Recharts、Framer Motion、Tailwind CSS 与 TypeScript strict

组件自包含，可单独复制；数据集中在 lib/mock-data.ts 便于替换

采用 MIT 许可，README 说明可商用、可修改、无需署名

模板详细介绍

Arcanea Dashboard Template 是一个前端仪表盘模板，README 描述其为「宇宙风格分析仪表盘」，包含 6 个液态玻璃（liquid glass）组件、6 个动效原语，且不依赖后端。仓库内置模拟数据，README 说明可在准备好后接入自己的 API。

模板提供 6 个仪表盘组件：4 个 StatCard（带 delta 与强调线的动画数字滚动）、RevenueChart（Recharts 面积图，渐变填充与自定义 tooltip）、TrafficDonut（带中心标签与配色图例的饼图）、TopProducts（带渐变进度条的排名列表）、FunnelCard（含流失百分比的多阶段转化漏斗）、ActivityFeed（带头像与 Gate 标签的近期事件列表）。动效原语位于 components/motion/，包括 LiquidGlass、SplitText、Reveal、GradientMesh、NumberTicker、GlowCard。

技术栈方面，README 列出 Next.js 16（App Router、Turbopack、React 19）、Recharts 图表库、Framer Motion 11、Tailwind CSS v3 与自定义设计 token、TypeScript strict，并强调无需任何环境变量，开箱即用模拟数据。架构上 README 指出三个关键文件：app/page.tsx 负责仪表盘布局（网格、组件与动效），lib/mock-data.ts 存放全部图表与列表数据，components/dashboard/*.tsx 为 6 个自包含组件，可单独复制。

定制方式包括替换 lib/mock-data.ts 中的数据、在 STATS 数组与 tailwind.config.ts 中修改强调色、在 components/dashboard/ 新增组件并加入网格、以及用 useSWR 或 useQuery 包裹组件接入实时数据（组件从 props 同步渲染）。设计 token 给出背景色 #09090b、玻璃样式 bg-white/[0.03] border-white/[0.06]、强调色 teal/violet/emerald/gold/rose，以及 Space Grotesk、Inter、JetBrains Mono 字体。

README 未提供关于数据持久化、认证、路由权限、测试或部署后运行表现的说明；预览截图仅证明页面截图存在，不代表功能。

Next.js后台

适合你的项目吗？

适用场景

快速搭建带图表的分析仪表盘界面原型
参考或复用液态玻璃风格组件与动效原语
在已有 Next.js App Router 项目中接入图表与数字滚动组件
以模拟数据先行开发，后续替换为自有 API 数据源

适合人群

需要宇宙暗色风格仪表盘 UI 的前端开发者
使用 Next.js App Router 与 Tailwind CSS 的项目
希望从模拟数据起步、逐步接入真实 API 的团队
需要可单独复制组件的设计或前端原型工作

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
README 提供的启动步骤：git clone 仓库、cd 进入目录、pnpm install、pnpm dev，然后访问 http://localhost:3000
2
README 说明无需任何环境变量，默认使用 lib/mock-data.ts 中的模拟数据
3
替换数据：编辑 lib/mock-data.ts，将导出替换为自有数据获取逻辑
4
修改主题：调整 lib/mock-data.ts 的 STATS 数组与 tailwind.config.ts 中的强调色
5
接入实时数据：用 useSWR 或 useQuery 包裹组件，组件从 props 同步渲染

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

https://github.com/frankxai/arcanea-dashboard-template/blob/main/LICENSE https://github.com/frankxai/arcanea-dashboard-template/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-14。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 80 / 100
技术栈: Next.js · React
网站类型: 后台

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-10-10
截图检查日期: 2026-10-14

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: codex-user-requested-batch-review-20261015 · 2026-10-15

查看当时使用的来源资料

SHA-256: 8e3f64267027bffcf94ab4d04829a8396732bffc1af6d0e89bf6eb918ac44ccb

2026-10-14T18:36:23.749Z

来源文件 / 仓库

# Arcanea Dashboard Template

Cosmic analytics dashboard with **6 liquid glass widgets**, **6 motion primitives**, and zero backend dependencies. Mock data included — wire your API when ready.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/frankxai/arcanea-dashboard-template)

## What's Inside

| Widget | What it does |
|--------|-------------|
| **StatCard** × 4 | Animated number tickers with delta + accent line |
| **RevenueChart** | Recharts area chart, gradient fill, custom tooltip |
| **TrafficDonut** | Pie chart with center label and color-coded legend |
| **TopProducts** | Ranked list with gradient progress bars |
| **FunnelCard** | Multi-stage conversion funnel with drop-off % |
| **ActivityFeed** | Recent events with avatar + Gate label |

Plus 6 motion primitives in `components/motion/`:
- LiquidGlass · SplitText · Reveal · GradientMesh · NumberTicker · GlowCard

## Stack

- **Next.js 16** (App Router, Turbopack, React 19)
- **Recharts** for charts (no D3 directly)
- **Framer Motion 11** for primitives
- **Tailwind CSS v3** + custom design tokens
- **TypeScript** strict
- **Zero env vars required** — runs with mock data out of the box

## Quick Start

```bash
git clone https://github.com/frankxai/arcanea-dashboard-template.git
cd arcanea-dashboard-template
pnpm install
pnpm dev
```

Open http://localhost:3000.

## Architecture — 3 Key Files

| File | What it does |
|------|-------------|
| `app/page.tsx` | The dashboard layout — grid + widgets + motion |
| `lib/mock-data.ts` | All chart/list data — replace with API calls |
| `components/dashboard/*.tsx` | The 6 widgets — each is self-contained, copy individually |

## Customization

- **Replace mock data**: edit `lib/mock-data.ts` and swap exports for your fetcher
- **Rebrand colors**: change accent values in `lib/mock-data.ts` STATS array and `tailwind.config.ts`
- **Add widgets**: drop a new component in `components/dashboard/` and add to the grid
- **Real-time data**: wrap any widget in a `useSWR` or `useQuery` hook — the components render synchronously from props

## Design Tokens

- Background: `#09090b` (cosmic void)
- Glass: `bg-white/[0.03] border-white/[0.06]` (in `LiquidGlass`)
- Accents: teal `#00bcd4`, violet `#a78bfa`, emerald `#34d399`, gold `#fbbf24`, rose `#f472b6`
- Type: Space Grotesk (display), Inter (body), JetBrains Mono (numbers)

## License

MIT — use commercially, modify freely, no attribution required.

---

Built by [Arcanea](https://arcanea.ai) · [GitHub](https://github.com/frankxai) · [More templates](https://arcanea.ai/templates)

反馈内容错误