AntDash Admin — Ant Design + React Template

A modern, production-ready admin dashboard template built with React 19, TypeScript, Ant Design 6, and Vite. Ships with Material Design-inspired theming, light/dark mode, dynamic routing, and a curated set of example pages to get you shipping fast.

Features

• React 19 + TypeScript — latest React with full type safety
• Ant Design 6 — rich component library, configured with a custom Material Design color palette
• Light & Dark themes — persistent theme toggle with Indigo-based light mode and a dark navy sider
• Vite — instant HMR and fast production builds
• React Router v7 — dynamic routes generated from a single menu config
• Dynamic breadcrumbs — auto-generated from the current route
• Ready-made pages — Dashboard, Login, Profile, Settings, Forms (standard + modal), CRUD examples (Students, Teachers, Movies), error & blank pages
• ESLint 9 — flat config with type-aware rules

Quick start

# Install dependencies
npm install

# Start the dev server
npm run dev

# Build for production
npm run build

# Preview the production build
npm run preview

# Lint
npm run lint

The dev server runs on http://localhost:5173 by default.

Project structure

src/
├── assets/           # Static assets (SVGs, images)
├── components/       # Shared components (MainMenu, MainBlock, etc.)
├── context/          # React contexts (ThemeContext)
├── pages/            # Route pages
│   ├── dashboard/    # Analytics dashboard with stats, tables, timeline
│   ├── forms/        # Form examples (inline + modal)
│   ├── home/         # Landing page with feature cards
│   ├── login/        # Login form
│   ├── movies/       # CRUD example
│   ├── students/     # List example
│   ├── teachers/     # List example
│   ├── profile/      # User profile page
│   ├── settings/     # App settings + theme toggle
│   └── error/        # 404 / error pages
├── App.tsx           # ConfigProvider + theme tokens
├── constants.tsx     # Menu config (drives routes & navigation)
└── main.tsx          # Entry point

Adding a new page

1. Create the page component under src/pages/your-page/.
2. Register it in src/constants.tsx by adding an entry to menuItems:

{
    key: '/your-page',
    icon: <SomeIcon />,
    label: 'Your Page',
    to: '/your-page',
    component: <YourPage />,
}

Routes and sidebar navigation are generated automatically from this config.

Theming

Theme tokens are defined in src/App.tsx (lightTheme / darkTheme). The sider has its own Material Design palette in src/components/menu/index.tsx (siderThemes). Both themes use Indigo as the primary color, with full light/dark algorithm support via Ant Design's ConfigProvider.

To customize colors, edit the token object in either theme:

token: {
    colorPrimary: '#3F51B5',   // Indigo 500
    colorSuccess: '#43A047',   // Green 600
    // ...
}

Tech stack

Package	Version
react	^19.2
antd	^6.3
react-router-dom	^7.13
vite	^8.0
typescript	^6.0
eslint	^9.39

License

MIT