Built on React and MUI with a Material Design visual style
ReactAdmin dashboard
material-dashboard-react — React Admin dashboard Template
By rachmanj
A Material Design admin dashboard template built on React and MUI, with over 70 front-end components and prebuilt example pages.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage
Desktop captureTop of page
Actual screenshot captured by the server browser.
One original preview is available. Open the full image to inspect the design.
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-12View source
What stands out
A quick read of the recorded project description.
Includes over 70 front-end components such as buttons, inputs, navbars, cards, and alerts
Provides prebuilt example pages including Dashboard, Profile, RTL, Sign In, and Sign Up
Component colors can be adjusted through MUI's styled() API and the sx prop
The src directory is organized into assets, components, examples, and layouts, with light and dark themes and RTL theme files
Released under the MIT license, with LICENSE.md and CHANGELOG.md included in the repository
Template Details
Material Dashboard 2 React is a free MUI admin template published by Creative Tim, hosted in a repository by rachmanj and released under the MIT license. It provides an interface based on Google Material Design, built with React and MUI, and includes more than 70 front-end components such as buttons, inputs, navbars, nav tabs, cards, and alerts. Component colors can be adjusted through MUI's styled() API and the sx prop. The template ships with prebuilt design blocks and example pages to help move from prototype to production pages.
The repository structure includes public and src directories: under src there are assets (images, theme, theme-dark, with the theme further divided into base, components, and functions, plus RTL theme files), components (MDAlert, MDAvatar, MDBadge, MDBox, MDButton, MDInput, MDPagination, MDProgress, MDSnackbar, MDTypography), context, examples (Breadcrumbs, Cards, Charts, Configurator, Footer, Items, LayoutContainers, Lists, Navbars, Sidenav, Tables, Timeline), layouts (authentication, billing, dashboard, notifications, profile, rtl, tables), and App.js, index.js, routes.js. The project also includes configuration files such as .eslintrc.json, .prettierrc.json, jsconfig.json, CHANGELOG.md, and LICENSE.md.
Example pages cover routes including Dashboard, Profile, RTL, Sign In, and Sign Up, with a demo at demos.creative-tim.com. The official documentation states support for the latest two versions of Chrome, Firefox, Edge, Safari, and Opera. Documentation is hosted on Creative Tim's learning lab, issues are tracked through GitHub Issues, and technical support requires contacting Creative Tim. Before use, install Node.js LTS and run yarn install or npm install in the project root.
ReactBackend
Is it right for your project?
Use Cases
- Building dashboard interfaces for admin systems
- Serving as a component and theme reference for React + MUI projects
- Quickly generating page structures for sign-in, sign-up, profile, and similar examples
- Prototyping admin interfaces that require RTL or dark themes
Suitable For
- Developers building admin interfaces with React and MUI
- Teams that need a Material Design dashboard template
- Individual projects looking to reuse existing components and example pages to shorten the prototyping phase
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Download and install the LTS version from the Node.js website
- 2
Run yarn install or npm install in the project root to install dependencies
- 3
Example pages and documentation are at demos.creative-tim.com and Creative Tim's learning lab, respectively
- 4
Third-party assets such as demo images, fonts, and icons must be checked separately against their own licenses
- 5
External services (domain, hosting, database, etc.) may incur additional costs
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 applies to that version's code and does not mean external services or third-party assets are free.
Must comply with when using
- You may use, modify, commercialize, and distribute this version's code for free.
- When distributing copies or substantial portions of the code, retain the original copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability 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 domain, hosting, database, payment, or AI may incur separate charges.
View Original Text Basis
https://github.com/rachmanj/material-dashboard-react/blob/main/LICENSE.mdhttps://github.com/rachmanj/material-dashboard-react/blob/main/README.mdPermission is hereby granted, free of charge
Original License Text
Compiled by DeepSeek based on repository license and README ·2026-10-12. 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
- Partly documented · 65 / 100
- Technologies
- 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
- 2022-01-28
- Screenshot last checked
- 2026-10-12
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 React 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: [email protected] · 2026-10-13
Inspect the recorded source material
SHA-256: 57715df092f18fb8bd13d69137270311b6dff8a800411a9bd133bb6cd516496e
2026-10-12T18:39:46.242Z
Source file / repository# [Material Dashboard 2 React](http://demos.creative-tim.com/material-dashboard-react/#/dashboard?ref=readme-mdr) [](https://twitter.com/intent/tweet?url=https://www.creative-tim.com/product/material-dashboard-react&text=Check%20Material%20Dashboard%202%20react%20made%20by%20@CreativeTim%20#webdesign%20#dashboard%20#materialdesign%20#react%20https://www.creative-tim.com/product/material-dashboard-react)
 [](https://github.com/creativetimofficial/material-dashboard-react/issues?q=is%3Aopen+is%3Aissue) [](https://github.com/creativetimofficial/material-dashboard-react/issues?q=is%3Aissue+is%3Aclosed)
Material Dashboard 2 React is our newest free MUI Admin Template based on React. If you’re a developer looking to create an admin dashboard that is developer-friendly, rich with features, and highly customisable, here is your match. Our innovative MUI & React dashboard comes with a beautiful design inspired by Google's Material Design and it will help you create stunning websites & web apps to delight your clients.
**Fully Coded Elements**
Material Dashboard 2 React is built with over 70 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining. All components can take variations in color, which you can easily modify using MUI styled() API and sx prop. You will save a lot of time going from prototyping to full-functional code because all elements are implemented.
This free MUI & React Dashboard is coming with prebuilt design blocks, so the development process is seamless,
switching from our pages to the real website is very easy to be done.
View [all components here](https://www.creative-tim.com/learning-lab/react/alerts/material-dashboard/).
**Documentation built by Developers**
Each element is well presented in very complex documentation.
You can read more about the [documentation here](https://www.creative-tim.com/learning-lab/react/overview/material-dashboard/).
**Example Pages**
If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages. You will be able to quickly set up the basic structure for your web project.
View [example pages here](https://demos.creative-tim.com/material-dashboard-react/#/dashboard).
**HELPFUL LINKS**
- View [Github Repository](https://github.com/creativetimofficial/material-dashboard-react)
- Check [FAQ Page](https://www.creative-tim.com/faq)
#### Special thanks
During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank them for providing their tools open source:
- [MUI](https://mui.com/) - The React UI library for faster and easier web development.
- [React ChartJS 2](http://reactchartjs.github.io/react-chartjs-2/#/) - Simple yet flexible React charting for designers & developers.
- [ChromaJS](https://gka.github.io/chroma.js/) - A small-ish zero-dependency JavaScript library for all kinds of color conversions and color scales.
Let us know your thoughts below. And good luck with development!
## Table of Contents
- [Versions](#versions)
- [Demo](#demo)
- [Quick Start](#quick-start)
- [Documentation](#documentation)
- [File Structure](#file-structure)
- [Browser Support](#browser-support)
- [Resources](#resources)
- [Reporting Issues](#reporting-issues)
- [Technical Support or Questions](#technical-support-or-questions)
- [Licensing](#licensing)
- [Useful Links](#useful-links)
## Versions
[<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/react-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/material-dashboard-react?ref=readme-mdr)
| React |
| ----- |
| [](http://demos.creative-tim.com/material-dashboard-react/#/dashboard?ref=readme-mdr)
## Demo
- [Dashboard](http://demos.creative-tim.com/material-dashboard-react/#/dashboard?ref=readme-sudr)
- [Profile](https://demos.creative-tim.com/material-dashboard-react/#/profile?ref=readme-sudr)
- [RTL](https://demos.creative-tim.com/material-dashboard-react/#/rtl?ref=readme-sudr)
- [Sign In](https://demos.creative-tim.com/material-dashboard-react/#/authentication/sign-in?ref=readme-sudr)
- [Sign Up](https://demos.creative-tim.com/material-dashboard-react/#/authentication/sign-up?ref=readme-sudr)
[View More](https://demos.creative-tim.com/material-dashboard-react/#/dashboard?ref=readme-mdr).
## Quick start
Quick start options:
- Download from [Creative Tim](https://www.creative-tim.com/product/material-dashboard-react?ref=readme-mdr).
## Terminal Commands
1. Download and Install NodeJs LTS version from [NodeJs Official Page](https://nodejs.org/en/download/).
2. Navigate to the root ./ directory of the product and run `yarn install` or `npm install` to install our local dependencies.
## Documentation
The documentation for the Material Dashboard is hosted at our [website](https://www.creative-tim.com/learning-lab/react/overview/material-dashboard/?ref=readme-mdr).
### What's included
Within the download you'll find the following directories and files:
```
material-dashboard-react
├── public
│ ├── apple-icon.png
│ ├── favicon.png
│ ├── index.html
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── assets
│ │ ├── images
│ │ └── theme
│ │ ├── base
│ │ ├── components
│ │ ├── functions
│ │ ├── index.js
│ │ └── theme-rtl.js
│ │ └── theme-dark
│ │ ├── base
│ │ ├── components
│ │ ├── functions
│ │ ├── index.js
│ │ └── theme-rtl.js
│ ├── components
│ │ ├── MDAlert
│ │ ├── MDAvatar
│ │ ├── MDBadge
│ │ ├── MDBox
│ │ ├── MDButton
│ │ ├── MDInput
│ │ ├── MDPagination
│ │ ├── MDProgress
│ │ ├── MDSnackbar
│ │ └── MDTypography
│ ├── context
│ ├── examples
│ │ ├── Breadcrumbs
│ │ ├── Cards
│ │ ├── Charts
│ │ ├── Configurator
│ │ ├── Footer
│ │ ├── Items
│ │ ├── LayoutContainers
│ │ ├── Lists
│ │ ├── Navbars
│ │ ├── Sidenav
│ │ ├── Tables
│ │ └── Timeline
│ ├── layouts
│ │ ├── authentication
│ │ ├── billing
│ │ ├── dashboard
│ │ ├── notifications
│ │ ├── profile
│ │ ├── rtl
│ │ └── tables
│ ├── App.js
│ ├── index.js
│ └── routes.js
├── .eslintrc.json
├── .prettierrc.json
├── CHANGELOG.md
├── ISSUE_TEMPLATE.md
├── jsconfig.json
├── LICENSE.md
├── package.json
└── README.md
```
## Browser Support
At present, we officially aim to support the last two versions of the following browsers:
<img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/chrome.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/firefox.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/edge.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/safari.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/opera.png" width="64" height="64">
## Resources
- [Live Preview](https://demos.creative-tim.com/material-dashboard-react/#/dashboard?ref=readme-mdr)
- [Download Page](https://www.creative-tim.com/product/material-dashboard-react?ref=readme-mdr)
- Documentation is [here](https://www.creative-tim.com/learning-lab/react/overview/material-dashboard/?ref=readme-mdr)
- [License Agreement](https://www.creative-tim.com/license?ref=readme-mdr)
- [Support](https://www.creative-tim.com/contact-us?ref=readme-mdr)
- Issues: [Github Issues Page](https://github.com/creativetimofficial/material-dashboard-react/issues)
## Reporting Issues
We use GitHub Issues as the official bug tracker for the Material Dashboard React. Here are some advices for our users that want to report an issue:
1. Make sure that you are using the latest version of the Material Dashboard React. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/product/material-dashboard-react?ref=readme-mdr).
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
## Technical Support or Questions
If you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us?ref=readme-mdr) instead of opening an issue.
## Licensing
- Copyright 2021 [Creative Tim](https://www.creative-tim.com?ref=readme-mdr)
- Creative Tim [license](https://www.creative-tim.com/license?ref=readme-mdr)
## Useful Links
- [More products](https://www.creative-tim.com/templates?ref=readme-mdr) from Creative Tim
- [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w)
- [Freebies](https://www.creative-tim.com/bootstrap-themes/free?ref=readme-mdr) from Creative Tim
- [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=readme-mdr) (earn money)
##### Social Media
Twitter: <https://twitter.com/CreativeTim>
Facebook: <https://www.facebook.com/CreativeTim>
Dribbble: <https://dribbble.com/creativetim>
Google+: <https://plus.google.com/+CreativetimPage>
Instagram: <https://instagram.com/creativetimofficial>
Explore similar templates
Compare previews and descriptions within the same stack and category.
ant-design-pro
Ant Design Pro is an enterprise-grade React admin scaffold built on React 19, Umi Max 4, and antd 6 with TypeScript.
React · Admin dashboard
coreui-free-react-admin-template
CoreUI's free React admin template, built on React and the CoreUI component library, provides dashboard layouts, sidebar navigation, routing, and example views. It includes .cursorrules, ARCHITECTURE.md, and DEVELOPMENT.md context files, plus JSDoc comments and PropTypes, to support AI-assisted development.
React · Admin dashboard
fastapi-react
A Cookiecutter template for FastAPI + React (TypeScript) full-stack projects, integrating PostgreSQL, SQLAlchemy, Alembic, Celery, Redis, JWT authentication, a react-admin admin panel, and a Docker Compose development environment with Nginx reverse proxy.
React · Admin dashboard
react-antd-admin-template
A React + Ant Design admin template for mid- and back-office products, with built-in login/logout, dynamic routing, permission checks, and user management.
React · Admin dashboard
react-saas-template
A React and Material-UI template for SaaS or admin websites, offering dashboard, chart, blog, payment, and file upload components. It uses Create-React-App, React-Router, Recharts, React-Stripe-js, React-Dropzone, and React-Cropper, with theme colors centralized in src/theme.js.
React · Admin dashboard
react-material-admin
React Material Admin is an MIT-licensed React admin template by Flatlogic, built on Material-UI. It provides dashboards, charts, tables, authentication, profile, and notification pages, with three color themes and responsive layouts.
React · Admin dashboard