Includes 6 dashboard components: 4 StatCards, RevenueChart, TrafficDonut, TopProducts, FunnelCard, ActivityFeed
Next.jsReactAdmin dashboard
arcanea-dashboard-template — Next.js Admin dashboard Template
By frankxai
Arcanea Dashboard Template is a cosmic-style analytics dashboard template built on the Next.js App Router, with 6 liquid glass components, 6 motion primitives, and mock data, running without a backend.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 3
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 3
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-14View source
What stands out
A quick read of the recorded project description.
components/motion/ provides 6 motion primitives: LiquidGlass, SplitText, Reveal, GradientMesh, NumberTicker, GlowCard
README states no environment variables are required and it runs with built-in mock data
Tech stack is Next.js App Router, Recharts, Framer Motion, Tailwind CSS, and TypeScript strict
Components are self-contained and can be copied individually; data is centralized in lib/mock-data.ts for easy replacement
Licensed under MIT; the README states commercial use, modification, and no attribution are allowed
Template Details
Arcanea Dashboard Template is a front-end dashboard template that the README describes as a "cosmic-style analytics dashboard," containing 6 liquid glass components, 6 motion primitives, and no backend dependency. The repository includes mock data, and the README states you can connect your own API when ready.
The template provides 6 dashboard components: 4 StatCards (animated number rolling with delta and accent line), RevenueChart (Recharts area chart with gradient fill and custom tooltip), TrafficDonut (donut chart with center label and color legend), TopProducts (ranked list with gradient progress bars), FunnelCard (multi-stage conversion funnel with drop-off percentages), and ActivityFeed (recent events list with avatars and Gate tags). Motion primitives live in components/motion/ and include LiquidGlass, SplitText, Reveal, GradientMesh, NumberTicker, and GlowCard.
On the tech stack, the README lists Next.js 16 (App Router, Turbopack, React 19), the Recharts charting library, Framer Motion 11, Tailwind CSS v3 with custom design tokens, and TypeScript strict, and emphasizes that no environment variables are required and mock data works out of the box. Architecturally, the README points to three key files: app/page.tsx handles the dashboard layout (grid, components, and motion), lib/mock-data.ts holds all chart and list data, and components/dashboard/*.tsx contains the 6 self-contained components that can be copied individually.
Customization options include replacing the data in lib/mock-data.ts, changing accent colors in the STATS array and tailwind.config.ts, adding new components under components/dashboard/ and placing them in the grid, and wrapping components with useSWR or useQuery to connect live data (components render synchronously from props). Design tokens specify background color #09090b, glass style bg-white/[0.03] border-white/[0.06], accent colors teal/violet/emerald/gold/rose, and the Space Grotesk, Inter, and JetBrains Mono fonts.
The README does not cover data persistence, authentication, route permissions, testing, or post-deployment runtime behavior; the preview screenshot only proves that a page screenshot exists and does not represent functionality.
Next.jsBackend
Is it right for your project?
Use Cases
- Quickly building an analytics dashboard UI prototype with charts
- Referencing or reusing liquid glass style components and motion primitives
- Adding charts and number rolling components to an existing Next.js App Router project
- Developing with mock data first and later replacing it with your own API data source
Suitable For
- Front-end developers who need a cosmic dark-style dashboard UI
- Projects using the Next.js App Router and Tailwind CSS
- Teams that want to start from mock data and gradually connect a real API
- Design or front-end prototyping work that needs individually copyable components
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Startup steps from the README: git clone the repository, cd into the directory, pnpm install, pnpm dev, then visit http://localhost:3000
- 2
README states no environment variables are required; by default it uses mock data in lib/mock-data.ts
- 3
Replacing data: edit lib/mock-data.ts and replace the exports with your own data fetching logic
- 4
Changing the theme: adjust the STATS array in lib/mock-data.ts and the accent colors in tailwind.config.ts
- 5
Connecting live data: wrap components with useSWR or useQuery; components render synchronously from props
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version in the public repository under the MIT license; the free scope is the code of that version and does not mean external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use, and distribution of this version's code are permitted.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and liability limitations are governed by the original license and applicable law.
Additional costs & items to verify
- Demo images, fonts, icons, and other third-party assets must be checked against their own licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur separate charges.
View Original Text Basis
https://github.com/frankxai/arcanea-dashboard-template/blob/main/LICENSEhttps://github.com/frankxai/arcanea-dashboard-template/blob/main/README.mdPermission is hereby granted, free of charge
Original License Text
Compiled by DeepSeek based on repository license and README ·2026-10-14. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 80 / 100
- Technologies
- Next.js · React
- Website type
- Admin dashboard
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-10-10
- Screenshot last checked
- 2026-10-14
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Next.js as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: codex-user-requested-batch-review-20261015 · 2026-10-15
Inspect the recorded source material
SHA-256: 8e3f64267027bffcf94ab4d04829a8396732bffc1af6d0e89bf6eb918ac44ccb
2026-10-14T18:36:23.749Z
Source file / repository# 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. [](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)
Explore similar templates
Compare previews and descriptions within the same stack and category.
next-shadcn-dashboard-starter
An MIT-licensed admin dashboard starter built with Next.js 16, shadcn/ui, Tailwind CSS v4, and TypeScript.
Next.js · Admin dashboard
Studio Admin · Radix UI
Studio Admin is an admin dashboard template built with Next.js 16, TypeScript, Tailwind CSS v4, and Shadcn UI.
Next.js · Admin dashboard
free-nextjs-admin-dashboard
A free, open-source admin dashboard template built on Next.js 16, React 19, TypeScript, and Tailwind CSS v4. It provides a collapsible sidebar, charts, tables, authentication forms, modals, dropdowns, and dark mode, with internationalization and RTL support since version 2.4.0.
Next.js · Admin dashboard
materio-mui-nextjs-admin-template-free
Materio Free is a Next.js admin dashboard template based on App Router and MUI, integrating Tailwind CSS and available in TypeScript and JavaScript versions.
Next.js · Admin dashboard
nextjs-postgres-nextauth-tailwindcss-template
A Vercel-maintained Next.js App Router admin dashboard starter with Auth.js GitHub OAuth, Postgres, Tailwind CSS, and Shadcn UI, plus a sample products table, seed endpoint, and CRUD interface.
Next.js · Admin dashboard
shadcn-dashboard-landing-template
An open-source admin dashboard and marketing landing page template built on shadcn/ui and Tailwind CSS, with both Vite + React and Next.js versions in one repository.
Next.js · Admin dashboard