🔉 Announcements
- MAJOR: Upgraded to Next.js 16! The previous Next.js 14 version is available on the
next-14 branch for backwards compatibility.
- NEW: Enhanced mock data system with Next.js API routes for a more realistic development experience
- NEW: Comprehensive theme customization system with live preview and persistence
- NEW: Multiple app modules added - Email, Notifications, Customer Management, Projects, Invoices, Chat, and more
- Working on integrating our mock data with actual APIs for a more real-world experience - Admin Hub APIs roadmap
About
A professional admin & dashboard template built using on Mantine 7 that comes with hundreds of
UI components, forms, tables, charts, pages and icons. This template is built
using Next.js 16, React, Apex Charts,Mantine DataTable
and Storybook.
Previous releases
Next.js 14 (App Router)
The previous release with Next.js 14 and Mantine 7 is available for users who need backwards compatibility or prefer the stable version:
- Branch:
next-14
- Features: App Router, Mantine 7, React 18, Mock API integration
Next.js 13 (Pages Router)
The legacy version supports Next 13 with Pages router and Mantine 6. To view the live demo
use this link - preview, and to checkout
fork the repo use this link - version 1
Features
- Mock API System: Complete Next.js API routes with mock data for realistic development experience
- Theme Customization: Live theme customizer with support for colors, layouts, and dark mode with localStorage persistence
- Multiple App Modules: Pre-built modules including Email, Notifications, Projects, Invoices, Chat, Kanban, Calendar, and more
- Type-Safe: Built with TypeScript for enhanced developer experience and fewer runtime errors
- Authentication: NextAuth integration with mock credentials for demo purposes
- Customizable: Clean, readable, and well-documented code that's easy to modify and extend
- Fully Responsive: Mobile, tablet, and desktop support with consistent experience across all devices
- Cross-Browser: Optimized for Chrome, Firefox, Opera, Edge, and other modern browsers
- Clean Code: Follows best practices and coding standards for easy integration and maintenance
- Regular Updates: Ongoing improvements, new components, and bug fixes
Tech stack
To make this template awesome, I used the following packages:
Core
- Next.js v16: Next.js is an open-source web development framework created by the private company Vercel providing
React-based web applications with server-side rendering and static website generation.
- Mantine v7: Mantine is a React UI components library. It's built on top of React and TypeScript, and provides a
variety of
components and hooks for building high-performance web applications.
- React v18: React is a free and open-source front-end JavaScript library for building user interfaces based on
components.
- Typescript v5: TypeScript is a free and open-source high-level programming language developed by Microsoft that
adds static typing with optional type annotations to JavaScript.
- Storybook v7: Storybook is a free, open-source tool for developing UI components in isolation. It's used by web
developers to improve their UI development workflow and build better web applications.
- Changeset CLI v2: Changeset is a package that helps in managing my versions and changelogs.
- NextAuth v4: NextAuth.js is a flexible and secure authentication library that can be used for client-side
authentication in Next.js.
- Tabler icons v2: Tabler Icons is a free, open-source icon library with over 4,700 icons. The icons are designed
with a modern aesthetic and are suitable for a wide range of applications.
- Mantine datatable v7: Mantine DataTable is a React component that can be used to create data-rich user interfaces.
It is a table component that is aware of dark themes and is designed for Mantine UI.
- Lodash v4: A JavaScript utility library delivering consistency, modularity, performance, & extras.
- Apex chart v3:s ApexCharts is a free, open-source JavaScript charting library that allows developers to create
interactive data visualizations for web pages. It can be used for both commercial and non-commercial projects.
- Dayjs v1: Day.js is a JavaScript library that handles dates and times.
- Tiptap v2: A headless, framework-agnostic and extendable rich text editor, based on ProseMirror.
- Fullcalendar v6: FullCalendar is a JavaScript event calendar with over 300 settings. It's open source and has a
free core.
- Dnd-Kit v6: Dnd-kit is a lightweight, modular, and extensible drag-and-drop toolkit for React. It is also
accessible and performant.
- Embla carousel v7: Embla Carousel is a lightweight carousel library with fluid motion and precise swiping.
- React simple maps v3: An svg map chart component built with and for React.
Dev
- Prettier v3: Prettier is a code formatter that automatically formats code to ensure it is consistent and easy to
read.
- Husky v8: Husky is a tool that makes it easier to work with git hooks. Prettier is a code formatter.
- Lint staged v15: Lint-staged will automatically add any modifications to the commit as long as there are no
errors.
- Postcss v8: PostCSS is a JavaScript library that uses plugins to transform CSS. It transpiles CSS into an abstract
syntax tree, which is then represented by JavaScript objects.
Quick start
Download
- Clone this repo git clone
https://github.com/design-sparx/mantine-analytics-dashboard.git
- Download from GitHub
Build tools
You'll need to install Node.js.
Once Node.js is installed, run npm install to install the rest of the template's dependencies. All dependencies will be
downloaded to the node_modules directory.
npm install
Now you're ready to modify the source files and generate new files. To automatically detect file changes and start a
local webserver at http://localhost:3000, run the following command.
npm run dev
Compile, optimize, minify and uglify all source files to build/
npm run build
Mock Data System
This template includes a comprehensive mock data system using Next.js API routes. All data is served from public/mocks/*.json files through API endpoints in src/app/api/.
Using Mock APIs
import { useFetch } from '@mantine/hooks';
import { IApiResponse } from '@/types/api-response';
function MyComponent() {
const { data, loading, error, refetch } = useFetch<IApiResponse<Product[]>>('/api/products');
if (loading) return <Skeleton />;
if (error) return <ErrorAlert />;
return (
<div>
{data?.data?.map(product => (
<ProductCard key={product.id} product={product} />
))}
</div>
);
}
Creating New Mock Data
- Add JSON file to
public/mocks/YourData.json
- Create API route in
src/app/api/your-endpoint/route.ts:
import { NextRequest, NextResponse } from 'next/server';
import fs from 'fs';
import path from 'path';
export async function GET(request: NextRequest) {
const filePath = path.join(process.cwd(), 'public', 'mocks', 'YourData.json');
const data = JSON.parse(fs.readFileSync(filePath, 'utf8'));
return NextResponse.json({
succeeded: true,
data,
errors: [],
message: 'Data retrieved successfully'
});
}
- Use in components with
useFetch('/api/your-endpoint')
Available API Endpoints
/api/products - Product catalog/api/invoices - Invoice management/api/projects - Project tracking/api/orders - Order management/api/sales - Sales analytics/api/stats - Dashboard statistics/api/traffic - Traffic analytics/api/tasks - Task/Kanban board/api/chat - Chat messages/api/profile - User profile
For more details, see CLAUDE.md.
File structure
Inside the zip-file you'll find the following directories and files. Both compiled and minified distribution files, as
Inside the zip file, you'll find the following directories and files. Both compiled and minified distribution files, as
well as the source files are included in the package.
mantine-analytics-dashboard/
├── .changeset
├── .github
├── .gitignore
├── .editorconfig
├── .prettierignore
├── .prettierrc
├── README.md
├── CHANGELOG.md
├── LICENSE
├── index.html
├── package.json
├── tsconfig.json
├── next.config.js
├── postcss.config.cjs
├── clerkMiddleware.ts
├── yarn.lock
├── public/
│ ├── mocks/
│ ├── _redirects
│ ├── favicon.ico
├── src/
│ ├── app/
├────── api/ # Next.js API routes (mock data)
├────── auth/