Material Dashboard PRO React is a Premium Material-UI Admin with a fresh, new design inspired by Google's Material Design. We are very excited to introduce our take on the material concepts through an easy to use and beautiful set of components. Material Dashboard PRO React was built over the popular Material-UI framework.
Material Dashboard PRO React makes use of light, surface and movement. The general layout resembles sheets of paper following multiple different layers, so that the depth and order is obvious. The navigation stays mainly on the left sidebar and the content is on the right inside the main panel.
Material Dashboard PRO React comes with 7 color filter choices for the links of the Sidebar (blue, green, orange, red, purple, rose, white), 3 filter color choices for background of the Sidebar (white, blue, black), an option to have a background image on the Sidebar and 6 color filter choices the card headers (blue, green, orange, red, purple, rose).
Material Dashboard PRO React uses a framework built by our friend Olivier - Material-UI, who did an amazing job creating the backbone for the material effects, animations, ripples and transitions. Big thanks to his team for the effort and forward thinking they put into it.
Special thanks go to:
- Perfect-scrollbar for the slim and beautiful scrollbars.
- React-chartist for the wonderful charts.
- React-datetime for the easy to use date and time pickers.
- React-big-calendar for the a wonderful calendar.
- React-bootstrap-sweetalert for the wonderful alerts.
- React-google-maps for the nice and easy to use map components.
- React-jvectormap for the nice vector map components.
- React-nouislider for the nice and clean slider.
- React-tables for the nice and clean slider.
- React-tagsinput for the easy and beatiful to use tags components.
- Live Preview
- [Material Dashboard Free React]((https://creativetimofficial.github.io/material-dashboard-react/)
- Material Dashboard PRO BS4 Html
- Material Dashboard PRO BS3 Html
- Material Dashboard Free Html
- Material Dashboard PRO Angular
- Material Dashboard Free Angular
Quick start options:
Other Products:
- Download HTML PRO BS4 Version.
- Download HTML PRO BS3 Version.
- Download Angular PRO Version.
- Download React Free Version.
- Download HTML Free Version.
- Download Angular Free Version.
- Install NodeJs from NodeJs Official Page.
- Open Terminal
- Go to your file project
- Run in terminal:
npm install - Then:
npm start - Navigate to
http://localhost:3000/ - (optional) Run in terminal
npm i -g cross-env
Within the download you'll find the following directories and files:
material-dashboard-pro-react
│
├── README.md
├── CHANGELOG.md
├── .env
├── package.json
├── documentation
│ ├── assets
│ └── tutorial-components.html
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── assets
│ ├── img
│ │ ├── faces
│ │ └── flags
│ ├── jss
│ │ ├── material-dashboard-pro-react
│ │ │ ├── components
│ │ │ ├── layouts
│ │ │ └── views
│ │ └── material-dashboard-pro-react.jsx
│ └── scss
│ ├── material-dashboard-pro-react
│ │ ├── mixins
│ │ └── plugins
│ └── material-dashboard-pro-react.scss
├── components
│ ├── Accordion
│ │ └── Accordion.jsx
│ ├── Badge
│ │ └── Badge.jsx
│ ├── Cards
│ │ ├── ChartCard.jsx
│ │ ├── FullHeaderCard.jsx
│ │ ├── HeaderCard.jsx
│ │ ├── IconCard.jsx
│ │ ├── ImagePriceCard.jsx
│ │ ├── LoginCard.jsx
│ │ ├── PricingCard.jsx
│ │ ├── ProfileCard.jsx
│ │ ├── RegularCard.jsx
│ │ ├── StatsCard.jsx
│ │ ├── TasksCard.jsx
│ │ └── TestimonialCard.jsx
│ ├── Clearfix
│ │ └── Clearfix.jsx
│ ├── CustomButtons
│ │ ├── Button.jsx
│ │ └── IconButton.jsx
│ ├── CustomDropdown
│ │ └── CustomDropdown.jsx
│ ├── CustomInput
│ │ └── CustomInput.jsx
│ ├── CustomLinearProgress
│ │ └── CustomLinearProgress.jsx
│ ├── CustomUpload
│ │ ├── ImageUpload.jsx
│ │ └── PictureUpload.jsx
│ ├── Footer
│ │ └── Footer.jsx
│ ├── Grid
│ │ ├── GridContainer.jsx
│ │ └── ItemGrid.jsx
│ ├── Header
│ │ ├── Header.jsx
│ │ ├── HeaderLinks.jsx
│ │ └── PagesHeader.jsx
│ ├── Heading
│ │ └── Heading.jsx
│ ├── InfoArea
│ │ └── InfoArea.jsx
│ ├── Instruction
│ │ └── Instruction.jsx
│ ├── NavPills
│ │ └── NavPills.jsx
│ ├── Pagination
│ │ └── Pagination.jsx
│ ├── Sidebar
│ │ └── Sidebar.jsx
│ ├── Snackbar
│ │ ├── Snackbar.jsx
│ │ └── SnackbarContent.jsx
│ ├── Table
│ │ └── Table.jsx
│ ├── Tasks
│ │ └── Tasks.jsx
│ ├── Timeline
│ │ └── Timeline.jsx
│ ├── Typography
│ │ ├── A.jsx
│ │ ├── Danger.jsx
│ │ ├── Info.jsx
│ │ ├── Muted.jsx
│ │ ├── P.jsx
│ │ ├── Primary.jsx
│ │ ├── Quote.jsx
│ │ ├── Small.jsx
│ │ ├── Success.jsx
│ │ └── Warning.jsx
│ └── Wizard
│ └── Wizard.jsx
├── index.js
├── layouts
│ ├── Dashboard.jsx
│ ├── Pages.jsx
│ └── RTL.jsx
├── routes
│ ├── dashboard.jsx
│ ├── index.jsx
│ ├── pages.jsx
│ └── rtl.jsx
├── variables
│ ├── charts.jsx
│ └── general.jsx
└── views
├── Calendar
│ └── Calendar.jsx
├── Charts
│ └── Charts.jsx
├── Components
│ ├── Buttons.jsx
│ ├── GridSystem.jsx
│ ├── Icons.jsx
│ ├── Notifications.jsx
│ ├── Panels.jsx
│ ├── SweetAlert.jsx
│ └── Typography.jsx
├── Dashboard
│ └── Dashboard.jsx
├── Forms
│ ├── ExtendedForms.jsx
│ ├── RegularForms.jsx
│ ├── ValidationForms.jsx
│ ├── Wizard.jsx
│ └── WizardSteps
│ ├── Step1.jsx
│ ├── Step2.jsx
│ └── Step3.jsx
├── Maps
│ ├── FullScreenMap.jsx
│ ├── GoogleMaps.jsx
│ └── VectorMap.jsx
├── Pages
│ ├── LockScreenPage.jsx
│ ├── LoginPage.jsx
│ ├── PricingPage.jsx
│ ├── RTLSupport.jsx
│ ├── RegisterPage.jsx
│ ├── Timeline.jsx
│ └── UserProfile.jsx
├── Tables
│ ├── DataTables.jsx
│ ├── ExtendedTables.jsx
│ └── RegularTables.jsx
└── Widgets
└── Widgets.jsx
More products from Creative Tim: https://www.creative-tim.com/bootstrap-themes
Tutorials: https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w
Freebies: https://www.creative-tim.com/products
Affiliate Program (earn money): https://www.creative-tim.com/affiliates/new
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