🔥 Be Strong in 2025: Unlock the All-Access Pass – 80% OFF! ❤️ Don't Miss Out!
Get Now

Material Dashboard 2 React

Custom development Preview Docs
Download PRO Version
Material Dashboard 2 React Image
Docs
Creative Tim Club 🔥 Access to all our current and future products

Material Dashboard 2 React

Free Material-UI & React Admin Template

· 4.90/5 (558 Reviews)

MIT License

Upgrade to PRO Free Download

Free MUI & React Admin Template

Product description


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.

Documentation built by Developers

Each element is well presented in very complex documentation.

You can read more about the documentation here.

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.

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 - The React UI library for faster and easier web development.
  • React ChartJS 2 - Simple yet flexible React charting for designers & developers.
  • ChromaJS - A small-ish zero-dependency JavaScript library for all kinds of color conversions and color scales.
  • Nepcha Analytics for the analytics tool. Nepcha is already integrated with this template. You can use it to gain insights into your sources of traffic.
Product certified by: Creative Tim
Material Dashboard 2 React - Figma Files for Professional Designers
Material Dashboard 2 React - JavaScript library for building user interfaces
Material Dashboard 2 React - Fully Coded and Responsive HTML5
Downloads
215,426
Version
2.2.0
Changelog
view
Updated
1 year ago
Released
7 years ago
Reviews
See 558 Reviews
Star
Handcrafted Elements
70
Customized Plugins
2
Example Pages
8
Community Support
Documentation
Fully Responsive

Upgrade to PRO Version

Get more power with Material Dashboard 3 PRO React. It has a lot more features compared to the free version. We hope you will create awesome websites/templates with this product!

What is in Demo? What is in PRO Version?
Elements 70 200
Plugins 2 12
Examples Pages 8 30
Full Coded
Documentation
SASS Files
Designer Files
Premium Support
Material Dashboard 3 PRO React Image
Live Preview Upgrade to PRO

We are here to help you!

210 Web Developers commented on this product

Custom Development Discord Server

jasonkjl72
  • downloaded
6 years ago

Hey @einazare, I've tried out the demo app; how can I add a new page to the app without adding a menu item on the left sidebar menu? Thanks

ctmployee
  • downloaded

Hello again @jasonkjl72 . Please check our live documentation for this issue: https://demos.creative-tim.com/material-dashboard-react/#/documentation/routing-system . Best, Manu
6 years ago

pranavpanchal
  • downloaded
6 years ago

Hey @einazare, I was wondering which file to edit for the routes so that the routes are only available if a user is authenticated (firebase.auth().currentUser).

ctmployee
  • downloaded

Hello @pranavpanchal and thank you for your interest in using our products. What i would do, is i would redirect the user to the login page if the user would not be logged in. Here is the official docs on redirect of react-router. https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md#redirect . The very first example is what i would do. Hope this will help you. Best, Manu.
6 years ago

kemardly
  • downloaded
6 years ago

Hi when I run npm start I found error like this Module not found: Can't resolve 'assets/css/material-dashboard-react.css?v=1.3.0' after that I set path in index.js to ./assets/css/material-dashboard-react.css?v=1.3.0 then this error occur Module not found: Can't resolve 'components/Card/Card.jsx' how to fix this I love your theme

ctmployee
  • downloaded

Hello @kemardly and thank you for your interest in using our product. Please read our live docs: https://demos.creative-tim.com/material-dashboard-react/#/documentation/tutorial . Best, Manu.
6 years ago

kemardly
  • downloaded

My script is like this it seem old version so I can't follow your link. Have you other solution. My script is "start": "node scripts/start.js",
6 years ago

kemardly
  • downloaded

thanks I solve it https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues/4
6 years ago

shezanazi
  • downloaded
6 years ago

@ctmployee Sorry for the late reply, as I was on holiday. I have it up and running now, however on heroku my env variables are not found. Is there something I need to setup?

shezanazi
  • downloaded

solved. The variables need to start with REACT_APP_
6 years ago

mohamedyassersayed
  • downloaded
6 years ago

I can not install it i need help please

ctmployee
  • downloaded

Hello @mohamedyassersayed and thank you for your interest in using our products. Please read our live docs: https://demos.creative-tim.com/material-dashboard-react/#/documentation/tutorial . Best, Manu.
6 years ago

mohamedyassersayed
  • downloaded

Thanks for the reply but I wanted you to dial it HTML or php
6 years ago

ctmployee
  • downloaded

Hello there again @mohamedyassersayed . We have a HTML version here: https://www.creative-tim.com/product/material-dashboard . Best, Manu.
6 years ago

mohamedyassersayed
  • downloaded

Thank
6 years ago

prasannapokharel
  • downloaded
6 years ago

Hi, Thank you for this awesome product. I just wanted to do some tweak but ain't able to. I want dashboard to be "public" but "user profile" to be private. So when user clicks at dashboard show him dashboard but when he clicks at user profile show him user profile if he is logged in else a small login component (not complete redirect to a login screen). Some thing like the following pseudocode. I will handle the firebase login. <Router history={this.hist}> <Switch> {indexRoutes.map((prop, key) => { if (prop.component == "UserProfile") {return <Route path={prop.path} component={SignIn} key={key} />;} else {return <Route path={prop.path} component={prop.component} key={key} />}; })} </Switch> </Router> How and where should I pass the props that user is logged in ? Thanks in advance.

ctmployee
  • downloaded

Hello there @prasannapokharel and thank you for your interest in using our products. What i would do, is i would redirect the user to the login page if the user would not be logged in. Here is the official docs on redirect of react-router. https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md#redirect . The very first example is what i would do. Hope this will help you. Best, Manu.
6 years ago

sloveez
  • downloaded
6 years ago

Hello and thank you for your hard work on this! I am trying to create my own "Card"-based component (just like on the Dashboard home with the icon). I'm deriving my component from React.Component. Functionally, everything is fine. However, this.props does not contain the parent classes for the correct styling. I think I'm just doing something wrong and it's probably not a bug. Any help would be appreciated!

ctmployee
  • downloaded

Hello @sloveez . Thank you for your interest in working with our products. Can you please open an issue here: https://github.com/creativetimofficial/material-dashboard-react/issues ? Since our platform does not support markdown inside the comments, we would have difficulties in understanding each other. This part here, the comments on our platform, should be used when there is a non-code related problem, once again, because of the markdown. Best, Manu.
6 years ago

alohia
  • downloaded
6 years ago

Hey! I just wanted to confirm that this Material Dashboard with the PSD will include Sketch files as well. I'm curious as you have not mentioned this in your description anywhere but I do see comments mentioning it.

ctmployee
  • downloaded

Hello there @alohia . Thank you for your interest in using our product. Since this is a FREE product, a freebie, it does not include PSD or Sketch files. Are you talking about the PRO one: https://www.creative-tim.com/product/material-dashboard-pro-react? If so, than i am afraid that the answer is no. It only has PSD files. Hope this information was helpful. Best, Manu.
6 years ago

felixaniel
  • downloaded
6 years ago

Hello, @einazare. Could you please give me some details about the improvements included in the pro version of this template? For example, I would like to know if data tables are more complete. Greets.

ctmployee
  • downloaded

Hello there @felixaniel . Thank you for your interest in working with out products. Well, the main difference is in the pages that you get (you get login, register, lock-screen pages for example), there are more props on almost all of our components, the number of components and plugins used is a bit larger, but to be quite frankly, I think the best way to see what the differences there are, you could take a look at both of the products live previews: https://demos.creative-tim.com/material-dashboard-react/#/dashboard <<and>> https://demos.creative-tim.com/material-dashboard-pro-react/#/dashboard . And the most important, you should read both of their documentation: https://demos.creative-tim.com/material-dashboard-react/#/documentation/tutorial <<and>> https://demos.creative-tim.com/material-dashboard-pro-react/#/documentation/tutorial . On both of these docs, in the left menu, you will find our components, how to use them, and their props. I am not sure what do you mean by <<For example, I would like to know if data tables are more complete>> . If you would please details on what you are trying to say here, I will give my best to give you an answer. Best, Manu.
6 years ago

felixaniel
  • downloaded

Ok, thanks, @einazare. The PRO version demo application you shared with me has exactly what I was looking for. I wanted to know if data tables include more functionality in the PRO version, and they do. Thanks!
6 years ago

alanooper
  • downloaded
6 years ago

I have a question similar @pranavpanchal answered by @einazare. I am using Material Dashboard React Pro 1.4.0 I have redirected the user to the login / Registration page by default. 1. I edited routes/index.jsx and changed: From:{ path: "/", name: "Home", component: Dashboard } To: { path: "/", name: "Home", component: Pages } 2. The Pages header comes up, I click Login and ger redirected to the correct url: http://localhost:3000/pages/login-page 3. I modified views/Pages/LoginPage.jsx render() and after successful login (I get an oAuth2 token from my backend), const { redirect } = this.state; if (redirect) { return(<Redirect from='/' to='/dashboard'/>); } else { return ( your original code) } 4. The redirect works. the Dashboard id completely visible with the following url: http://localhost:3000/dashboard 5. Issue; Click "Widgets" in the sidebar. The URL displays http://localhost:3000/widgets however the GUI shows the Pages Header and login behaving as if it redirected to http://localhost:3000/

ctmployee
  • downloaded

Hello there @alanooper . I think you've maybe did not change the whole routing system as you should. I've made some updates a few weeks ago in our live docs. <<https://demos.creative-tim.com/material-dashboard-pro-react/#/documentation/routing-system>> There is a notice here about what your problem might be. Best, Manu.
6 years ago

You have to be logged in to post a comment. Login here.

  1. Home
  2. All Templates
  3. Material Dashboard 2 React

2,700,622 accounts

4,736,360 downloads

305 products

Join our newsletter

Your subscription could not be saved. Please try again.
Your subscription has been successful.

Company

Help and Support

Tailwind Resources

Developer Resources

© 2025 Creative Tim, all rights reserved. Made with for a better web.