❤️ Creative Tim Club - Access all our Present & Future Premium Products

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 - Fully Coded and Responsive HTML5
Material Dashboard 2 React - JavaScript library for building user interfaces
Material Dashboard 2 React - Figma Files for Professional Designers
Downloads
198,226
Version
2.2.0
Changelog
Updated
10 months ago
Released
6 years ago
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 2 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

We are here to help you!

209 Web Developers commented on this product

alanooper
  • downloaded
5 years ago

Hello Manu, I read the link, thank you. Still inclear how to edit / invoke dashboard.jsx paths according to the instructions. Can you post or email me the edited files since I think that the majority of the "Pro" customers will want this to be the default configuration? src/routes/index.jsx, src/routes/dashboard.jsx, src/routes/pages.jsx , ) src/routes/rtl.jsx, src/views/pages/RTLSupport.jsx Alan S. Cooper

alanooper
  • downloaded

Should I file a bug and upload my edited files instead?
5 years ago

robertoannazzaro31g
  • downloaded
5 years ago

How can I run it once i downloaded it?

ctmployee
  • downloaded

Hello @robertoannazzaro31g and thank you for your interest in working with our products. Here is a link to our live docs: https://demos.creative-tim.com/material-dashboard-react/#/documentation/tutorial . You will find what you need here. Best, Manu.
5 years ago

deepanagrawal6
  • downloaded
5 years ago

Hi Manu, How can I route from one login page on click of button to Dashboard Page. Earlier I was using hashHistory.push() but it's not working. Can you please help me?

ctmployee
  • downloaded

Hello there @deepanagrawal6 . Is this a PRO or a FREE issue? I am asking this because in our PRO product we have a Login page. Anyhow, I found this thread on stack overflow: https://stackoverflow.com/questions/42123261/programmatically-navigate-using-react-router-v4/43333330 . I believe this is what you were looking for. Let me know if it helped you. Best, Manu.
5 years ago

deepanagrawal6
  • downloaded

Hi Manu, This is free version issue.It helped.Thanks. Facing another issue, after navigating from login page to dashboard when trying to access different options from left panel example (user,typography,maps) it is again redirecting me to login page. Not able to understand why this behaviour is occuring. Please help me here.
5 years ago

ctmployee
  • downloaded

Hello again @deepanagrawal6 . Can you please open this issue on github? I will need some stuff from you and here on our comments sections we can not paste code. Best, Manu.
5 years ago

ousainoujaiteh
  • downloaded
5 years ago

Hi everyone I download the theme and am using with hyperledger fabric.I have input fields that take input from users and am using the CustomInput, but I don't how to set a name attribute for an a CustomInput and this is how am doing it inputProps={{ name: "address" }}. Please I need help

ctmployee
  • downloaded

Hello there @ousainoujaiteh and thank you for your interest in working with our products. It seems to me that you are doing it right. If you inspect the element, you do not see the prop on the input? I've just made a test with your example, and it showed in my browser. Just a little bit of an advice. Please, next time open an issue on Github if there is something about showcasing some code. As you can see our comments section here where not designed to use markdown or something that supports code snippets. Hope this information helps you. If you have any further questions, please let me know. Best, Manu.
5 years ago

ousainoujaiteh
  • downloaded
5 years ago

ok thank you for the advice, but still when i send request is not am always getting 422 error from the rest server.

ctmployee
  • downloaded

Hello again @ousainoujaiteh . From what server you get 422 error? From Github? Best, Manu.
5 years ago

ousainoujaiteh
  • downloaded
5 years ago

It is from the rest where can share the code for you to see.

ctmployee
  • downloaded

Hello again @ousainoujaiteh . You can open a ticket here with the issue: https://www.creative-tim.com/contact-us , or on Github here: https://github.com/creativetimofficial/material-dashboard-react/issues . Best, Manu.
5 years ago

alanooperu4g 5 years ago

How do you set the default string / text value in a CustomInput field? In material-ui is is "defaultValue". https://material-ui.com/api/input/ I did not see an example in your docs or code? <CustomInput labelText="Name" id="name" defaultValue="John" value="Jane" formControlProps={{ fullWidth: true }} /> Alan Cooper

ctmployee
  • downloaded

Hello there @alanooperu4g . As per our live docs here (https://demos.creative-tim.com/material-dashboard-react/#/documentation/inputs) you should use the inputProps to pass props as an object. So to pass a default value, you would need to do something like this: inputProps={{defaultValue: "yourValue"}}. Best, Manu.
5 years ago

alanooperu4g 5 years ago

Thank you Manu, it worked.

stanleyliu1006 5 years ago

@einazare I am trying to figure out how can i easily import your customized components sit in the src/components folder to my existing project, i am wondering can i packaging these components into node_modules folder, and import them into exisitng jsx file, or that not possible? Kind regards Stanley

ctmployee
  • downloaded

Hello there @stanleyliu1006 . You can use npm install --save material-dashboard-react and then import your components something like: import xx from "material-dashboard-react/dist/components/xx/xx" . As you can see, we haven't done a pretty good work with adding this product on npm, and this is because this product is a template / product, not a npm library. Best, Manu.
5 years ago

rafaelkillua
  • downloaded
5 years ago

Hello! I'm using version 1.5.0 (free) of this dashboard (btw, awesome!) and I notice one thing: In the Header component, specifically the makeBrand function, the navbarName doesn't show in dynamic URL paths. It doesn't match (/something/:id !== /something/1298192891). Is there something expected to you guys? Thanks!

ctmployee
  • downloaded

Hello there @rafaelkillua . Thank you for your interest in working with our products and your kind words. Unfortunately, you will need to change our function to your needs. In our next update, we'll add a default navbar brand name for this use case. Best, Manu.
5 years ago

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