Fast Dashboard Template

A modern, offline-capable dashboard built with Next.js 16, Ant Design 6, and TanStack Query. No login required — clone and start building!

Next.js

16.1

React

19.2

Ant Design

6.0

TanStack Query

5.x

Example Pages

Keep these

Reference implementations for data fetching, offline state, components, and links. Keep them for context when building new pages.

Keep the example pages

These example pages show patterns for common use cases. When you add new pages, you can reference them for consistent structure and data fetching. You can mark your own routes with isExample: true in routes.ts if they are demos.

Example

TanStack Query

Data Fetching

Fetch real-time data from external APIs. Example with tide data that refreshes automatically.

Explore

Example

Persistence

Offline State

Persist state to localStorage with TanStack Query. Works offline and syncs when back online.

Explore

Example

Ant Design 6

Components

Showcase of Ant Design components. Buttons, forms, tables, modals, and more.

Explore

Example

Template

Links

A beautiful Linktree-style page to showcase your links and social media profiles.

Explore

How to add a new page

Quick start

Follow these steps to add your own pages to the dashboard

Step 1: Create your page

Create a new folder in src/app/your-page-name/ with a page.tsx file. All pages must be client components.

// src/app/my-page/page.tsx
"use client";
import React from "react";
import { Typography, Card } from "antd";

const { Title } = Typography;

export default function MyPage() {
  return (
    <div style={{ padding: 24 }}>
      <Title>My Page</Title>
      <Card>{/* Your content */}</Card>
    </div>
  );
}

Step 2: Add route configuration

Step 3: Add data fetching (if needed)

Project structure

src/
├── app/                    # Next.js App Router pages
│   ├── api/               # API routes (backend)
│   ├── [page-name]/       # Your pages go here
│   │   └── page.tsx       # Page component
│   └── layout.tsx         # Root layout with AppShell
├── components/            # Reusable UI components
├── hooks/                 # Custom React hooks
├── services/              # API/data fetching logic
├── config/                # Static configuration
│   └── routes.ts         # Route definitions (add isExample for demo pages)
└── types/                 # TypeScript types