React-Admin-Template-Pro is an open-source React admin dashboard boilerplate built with React 18 Hooks and React Router 6 that turns a single route configuration table into a full management console with login, permission-based routing, theme switching, and dynamic sidebars.
What is React-Admin-Template-Pro?
React-Admin-Template-Pro is a back-office management system template developed with React Hooks and React-Router V6. It takes a route table configuration as input and produces a complete admin interface: a dynamically generated sidebar, dynamic breadcrumbs, authentication and authorization guards, theme switching, a 404 page, and lazy-loaded route components. The template is maintained by the developer MelodyFish under the GitHub repository MelodyFish/react-admin-template-pro, and a live preview is available at https://www.cloudshadow.xyz.
Key Features
- Route-table-driven sidebar — The sidebar is generated automatically from the route configuration, supports multi-level nested routes, collapses responsively, and filters menu items according to the user's permissions.
- Auth and permission guards — An authenticated component blocks unauthenticated users, and a permission component blocks roles without the required access, even when someone tries to enter a restricted page by manually editing the browser URL.
- Axios encapsulation — A re-packaged Axios layer with instance configuration, request and response interceptors, and global HTTP status-code handling.
- Theme switching — Users can switch the admin theme at runtime; animated GIFs in the repository demonstrate the effect.
- Dynamic breadcrumbs — Breadcrumb navigation is generated from the current route hierarchy, matching the dynamic sidebar.
- Lazy loading — Route-level components are lazily loaded to reduce the initial bundle size.
- Less and Sass support — The project includes adapters for both Less and Sass, letting teams choose their preferred CSS preprocessor.
- Proxy configuration — A setupProxy.js file configures development proxies to solve cross-origin requests during local development.
- Low-coupling architecture — Modules are designed as plug-and-play; each component averages 60 lines of code, and unused features can be removed without affecting the rest of the system.
- Modern dependency stack — Built on React@18, [email protected], [email protected], [email protected], [email protected], and [email protected], all listed explicitly in the repository's technical stack section.
Who is it for?
- Front-end developers who want to skip repetitive admin boilerplate and start writing business code immediately.
- Full-stack engineers who need to rapidly scaffold a complete admin console with login, routing, and permission management.
- Junior programmers looking for a modern, complete React practice project with documented features and small, readable components.
- Teams adopting React who want a base that supports Less & Sass and an easily decoupled architecture for customization.
What can you do with it?
- Set up role-based UIs: Configure the route table and permission logic so administrators see an "Analysis" dashboard page under Dashboard while regular users do not, and URL-based access bypass is blocked.
- Customize the visual theme: Toggle the theme color scheme at runtime without a rebuild.
- Build a responsive admin layout: Use the sidebar, header, breadcrumb, and content area that adapts to narrow screens through responsive collapsing.
- Handle network requests consistently: Use the pre-configured Axios instance and interceptors to handle status codes and global errors across the app.
How does it work?
To run the template locally: clone the repository, install dependencies with npm install or yarn install, then start the dev server with npm run start or yarn start. The codebase follows a clear directory structure — routes in src/route.js, network calls in src/service, global state in src/store, shared components in src/components — so new pages are added by extending the route table and adding corresponding page components.
Pricing
The template is free and open source; the repository accepts voluntary donations via cryptocurrency addresses listed on the GitHub page.
Alternatives
- Ant Design Pro — a React admin scaffold built on Ant Design and UmiJS, oriented toward full enterprise boilerplate.
- React Admin — a different approach to admin UIs that pairs React with a data-provider architecture for CRUD-heavy backends.
FAQ
Is React-Admin-Template-Pro free?
Yes, the project is open source and free to use. The author accepts voluntary donations but there is no paywall or premium tier.
What React version does it require?
The template is built on React 18 with Hooks, so it expects a React 18 environment; it also relies on React Router 6.x, Antd 4.23.x, Mobx 6.x, ECharts 5.x, and Axios 0.27.x.
Does it support route-level permissions?
Yes. The template includes an auth component that blocks unauthenticated users and a permission component that blocks roles without the required permission, including attempts to enter restricted pages by manually editing the URL.
How do I change or remove a feature?
Individual modules are designed with low coupling. To drop a feature, you remove its component and remove the corresponding route entry from the route table; no global refactoring is required.
