NextJS version of Material Dashboard React

Last update: May 5, 2022

Material Dashboard React Tweet

version license GitHub issues open GitHub issues closed Join the chat at https://gitter.im/NIT-dgp/General Chat

Product Image

NextJS Material Dashboard is a free Material-UI, NextJS and React 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. NextJS Material Dashboard was built over the popular Material-UI, NextJS and React frameworks.

NextJS Material Dashboard 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.

NextJS Material Dashboard comes with 5 color filter choices for both the sidebar and the card headers (blue, green, orange, red and purple) and an option to have a background image on the sidebar.

NextJS Material Dashboard was created using NextJS and it 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.

We are very excited to share this dashboard with you and we look forward to hearing your feedback!

It is open source, and it's Github Repo can be found here.

Table of Contents

Versions

NextJS NodeJS Laravel Vue & Laravel Vuetify
 NextJS Material Dashboard Material Dashboard React NodeJS Material Dashboard Laravel Vue Material Dashboard Laravel Vuetify Material Dashboard
HTML Dark HTML React Vue Angular
Material Dashboard Dark Edition Material Dashboard HTML Material Dashboard React Vue Material Dashboard Material Dashboard Angular

Demo

View More.

Quick start

Quick start options:

Documentation

The documentation for the Material Dashboard React is hosted at our website.

File Structure

Within the download you'll find the following directories and files:

nextjs-material-dashboard
.
├── CHANGELOG.md
├── ISSUE_TEMPLATE.md
├── LICENSE.md
├── README.md
├── assets
│   ├── css
│   │   └── nextjs-material-dashboard.css
│   ├── github
│   │   ├── md-react.gif
│   │   └── react.svg
│   ├── img
│   │   └── faces
│   └── jss
│       ├── nextjs-material-dashboard
│       │   ├── cardImagesStyles.js
│       │   ├── checkboxAdnRadioStyle.js
│       │   ├── components
│       │   │   ├── buttonStyle.js
│       │   │   ├── cardAvatarStyle.js
│       │   │   ├── cardBodyStyle.js
│       │   │   ├── cardFooterStyle.js
│       │   │   ├── cardHeaderStyle.js
│       │   │   ├── cardIconStyle.js
│       │   │   ├── cardStyle.js
│       │   │   ├── customInputStyle.js
│       │   │   ├── customTabsStyle.js
│       │   │   ├── footerStyle.js
│       │   │   ├── headerLinksStyle.js
│       │   │   ├── headerStyle.js
│       │   │   ├── rtlHeaderLinksStyle.js
│       │   │   ├── sidebarStyle.js
│       │   │   ├── snackbarContentStyle.js
│       │   │   ├── tableStyle.js
│       │   │   ├── tasksStyle.js
│       │   │   └── typographyStyle.js
│       │   ├── dropdownStyle.js
│       │   ├── layouts
│       │   │   ├── adminStyle.js
│       │   │   └── rtlStyle.js
│       │   ├── tooltipStyle.js
│       │   └── views
│       │       ├── dashboardStyle.js
│       │       ├── iconsStyle.js
│       │       └── rtlStyle.js
│       └── nextjs-material-dashboard.js
├── components
│   ├── Card
│   │   ├── Card.js
│   │   ├── CardAvatar.js
│   │   ├── CardBody.js
│   │   ├── CardFooter.js
│   │   ├── CardHeader.js
│   │   └── CardIcon.js
│   ├── CustomButtons
│   │   └── Button.js
│   ├── CustomInput
│   │   └── CustomInput.js
│   ├── CustomTabs
│   │   └── CustomTabs.js
│   ├── FixedPlugin
│   │   └── FixedPlugin.js
│   ├── Footer
│   │   └── Footer.js
│   ├── Grid
│   │   ├── GridContainer.js
│   │   └── GridItem.js
│   ├── Navbars
│   │   ├── AdminNavbarLinks.js
│   │   ├── Navbar.js
│   │   └── RTLNavbarLinks.js
│   ├── PageChange
│   │   └── PageChange.js
│   ├── Sidebar
│   │   └── Sidebar.js
│   ├── Snackbar
│   │   ├── Snackbar.js
│   │   └── SnackbarContent.js
│   ├── Table
│   │   └── Table.js
│   ├── Tasks
│   │   └── Tasks.js
│   └── Typography
│       ├── Danger.js
│       ├── Info.js
│       ├── Muted.js
│       ├── Primary.js
│       ├── Quote.js
│       ├── Success.js
│       └── Warning.js
├── documentation
│   ├── assets
│   │   ├── css
│   │   │   ├── bootstrap.min.css
│   │   │   ├── demo-documentation.css
│   │   │   └── material-dashboard.css
│   │   ├── img
│   │   │   └── faces
│   │   └── js
│   │       ├── bootstrap.min.js
│   │       └── jquery-3.2.1.min.js
│   └── tutorial-components.html
├── layouts
│   ├── Admin.js
│   └── RTL.js
├── next.config.js
├── package.json
├── pages
│   ├── _app.js
│   ├── _document.js
│   ├── _error.js
│   ├── admin
│   │   ├── dashboard.js
│   │   ├── icons.js
│   │   ├── maps.js
│   │   ├── notifications.js
│   │   ├── table-list.js
│   │   ├── typography.js
│   │   ├── upgrade-to-pro.js
│   │   └── user-profile.js
│   ├── index.js
│   └── rtl
│       └── rtl-page.js
├── routes.js
└── variables
    ├── charts.js
    └── general.js

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

Kit Versions

NextJS React Native Vue Ghost
 NextJS Material Kit Material Kit React Native Vue Material Kit Material Kit Ghots
HTML React
Material Kit HTML Material Kit React

Pro Versions

NextJS Laravel Vue & Laravel Vuetify
 NextJS Material Dashboard PRO Material Dashboard PRO Laravel Vue Material Dashboard PRO Laravel Vuetify Material Dashboard PRO
HTML React Vue Angular
Material Dashboard PRO HTML Material Dashboard PRO React Vue Material Dashboard PRO Material Dashboard PRO Angular

Pro Kit Versions

NextJS React Native Vue Laravel
 NextJS Material Kit PRO Material Kit PRO React Native Vue Material Kit PRO Material Blog PRO Laravel
HTML React
Material Kit PRO HTML Material Kit PRO React

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.
  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 instead of opening an issue.

Licensing

Useful Links

More products from Creative Tim: https://www.creative-tim.com/products

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

GitHub

https://github.com/creativetimofficial/nextjs-material-dashboard
Comments
  • 1. installation problem

    after cloning the app and trying to run "npm install" i am getting this errors

    npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! [email protected]"17.0.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer [email protected]"^0.14.9 || ^15.0.0 || ^16.0.0" from [email protected] npm ERR! node_modules/react-chartist npm ERR! [email protected]"0.14.3" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR!

    https://www.creative-tim.com/new-issue/nextjs-material-dashboard

    If your issue was not created using the app above, it will be closed immediately.

    Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit: 👉 https://www.creative-tim.com/bundles 👉 https://www.creative-tim.com

    Reviewed by spirituelle at 2021-02-11 00:07
  • 2. installatin issue

    https://www.creative-tim.com/new-issue/nextjs-material-dashboard?ref=njsmd-new-issue afer cloning the app i was trying to run "npm install" but i am getting an error npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: nextjs-material[email protected] npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! [email protected]"17.0.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer [email protected]"^0.14.9 || ^15.0.0 || ^16.0.0" from [email protected] npm ERR! node_modules/react-chartist npm ERR! [email protected]"0.14.3" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR!

    Reviewed by spirituelle at 2021-02-11 00:05
  • 3. installation problem

    I am getting an error afer cloning the project and trying to install node packages by running "npm install"

    npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! [email protected]"17.0.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer [email protected]"^0.14.9 || ^15.0.0 || ^16.0.0" from [email protected] npm ERR! node_modules/react-chartist npm ERR! [email protected]"0.14.3" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR!

    Reviewed by spirituelle at 2021-02-10 23:54
  • 4. [Bug] Won't start. Dependency issues maybe.

    Version

    1.1.0

    Reproduction link

    https://www.creative-tim.com

    Operating System

    macOS Big Sur

    Device

    Macbook Pro

    Browser & Version

    firefox 90.0.2

    Steps to reproduce

    npm -v 7.20.5 node -v 16.4.0

    1. Download repo
    2. $ npm install
    3. npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! [email protected]"17.0.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer [email protected]"^15.3.0 || ^16.0.0" from [email protected] npm ERR! node_modules/react-swipeable-views npm ERR! [email protected]"0.13.9" from the root project

    // also happens with react-chartist

    1. delete package-lock.json and /node_modules
    2. run npm install --save --legacy-peer-deps
    3. still breaks

    Sometimes the install passes, sometimes it hangs.

    Haven't been able to get npm run dev to work.

    What is expected?

    Run npm install and npm run dev.

    What is actually happening?

    npm install fails


    Solution

    Additional comments

    Reviewed by jonvaljonathan at 2021-08-09 12:41
  • 5. [Bug] Installation Errors after download

    Version

    1.1.0

    Reproduction link

    https://codesandbox.io/s/currying-morning-6ejk6?file=/pages/_app.js

    Operating System

    Linux

    Device

    LenovoThinkPad

    Browser & Version

    Mozilla Firefox 90.0.2 (64-bit)

    Steps to reproduce

    1. Download or clone code
    2. Go to terminal
    3. Run npm install or yarn install (I use yarn)

    What is expected?

    Success all package installed

    What is actually happening?

    [[email protected] nextjs-material-dashboard]$ npm install npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! [email protected]"17.0.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer [email protected]"^0.14.9 || ^15.0.0 || ^16.0.0" from [email protected] npm ERR! node_modules/react-chartist npm ERR! [email protected]"0.14.3" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See /home/kecamp/.npm/eresolve-report.txt for a full report.

    npm ERR! A complete log of this run can be found in: npm ERR! /home/kecamp/.npm/_logs/2021-08-01T22_43_44_878Z-debug.log


    Solution

    Additional comments

    Reviewed by kecampcr at 2021-08-01 23:19
Soft UI Dashboard React - Free Dashboard using React and Material UI
Soft UI Dashboard React - Free Dashboard using React and Material UI

Soft UI Dashboard React - Free Dashboard using React and Material UI

May 11, 2022
Soft UI Dashboard React - Free Dashboard using React and Material UI
Soft UI Dashboard React - Free Dashboard using React and Material UI

Soft UI Dashboard React - Free Dashboard using React and Material UI

May 11, 2022
Dashboard-reactjs-v1 - Simple dashboard with nested routes using reactjs and material-ui
Dashboard-reactjs-v1 - Simple dashboard with nested routes using reactjs and material-ui

Dashboard-reactjs Simple dashboard with nested routes using reactjs and material

Jan 6, 2022
Volt React is a free and open source admin dashboard template built in React.js and based on the latest version of the Bootstrap 5
Volt React is a free and open source admin dashboard template built in React.js and based on the latest version of the Bootstrap 5

Volt React is a free and open source admin dashboard template built in React.js and based on the latest version of the Bootstrap 5 CSS framework. It features over 100 UI elements, plugins, and example based built with React components.

May 12, 2022
React version of Argon Dashboard
React version of Argon Dashboard

Argon Dashboard React Start your development with a Dashboard for Bootstrap 4, React and Reactstrap, made with create-react-app. It is open source, fr

May 17, 2022
Black Dashboard React is a beautiful Bootstrap 4, Reacstrap and React (create-react-app) Admin Dashboard with a huge number of components built to fit together and look amazing.
Black Dashboard React is a beautiful Bootstrap 4, Reacstrap and React (create-react-app) Admin Dashboard with a huge number of components built to fit together and look amazing.

Black Dashboard React Black Dashboard React is a beautiful Bootstrap 4, Reacstrap and React (create-react-app) Admin Dashboard with a huge number of c

May 8, 2022
Light Bootstrap Dashboard React is an admin dashboard template designed to be beautiful and simple.
Light Bootstrap Dashboard React is an admin dashboard template designed to be beautiful and simple.

Light Bootstrap Dashboard React Light Bootstrap Dashboard React is an admin dashboard template designed to be beautiful and simple. It is built on top

Apr 22, 2022
React Dashboard - Soft UI Dashboard | AppSeed
React Dashboard - Soft UI Dashboard | AppSeed

React Dashboard - Soft UI Dashboard | AppSeed

May 16, 2022
Test-task-fullstack-dashboard - Full-stack dashboard App With React.js
Test-task-fullstack-dashboard - Full-stack dashboard App With React.js

Test Task: Full-stack dashboard app Link to task Link to Figma template Live Dem

Jan 6, 2022
Map-statistics-dashboard - A simple map Covid-19 statistics dashboard made with React
Map-statistics-dashboard - A simple map Covid-19 statistics dashboard made with React

map-statistics-dashboard A simple map Covid-19 statistics dashboard made with Re

Jan 17, 2022
Free React Admin Dashboard made with Material UI components and React.
Free React Admin Dashboard made with Material UI components and React.

Minimal UI (Free version) Free React Admin Dashboard made with Material UI components and React. Minimal Kit FREE Minimal Kit PRO 7 Demo Pages 40 demo

May 10, 2022
May 12, 2022
Free React Typescript Admin Dashboard Template built with Material-UI
Free React Typescript Admin Dashboard Template built with Material-UI

Tokyo Free White Typescript React Admin Dashboard Free React Typescript Admin Dashboard Template built with Material-UI This free and open source admi

May 10, 2022
Nextjs-chakra-navigation-example - NextJS with chakra-ui responsive nav example

nextjs-chakra-navigation-example I looked at how to implement navigation in next

Jan 23, 2022
Nextjs-ts-mui5-scss-storybook-starter - Next.js + TypeScript + Material UI v5 + Sass + Storybook starter
Nextjs-ts-mui5-scss-storybook-starter - Next.js + TypeScript + Material UI v5 + Sass + Storybook starter

nextjs-ts-mui5-scss-storybook-starter ?? Next.js + TypeScript + Material UI v5 +

May 5, 2022
React template app with clean architecture approach (light version for small projects)

React app with clean architecture approach (light version for small projects) app App directory contains the State Management (in models folder) and C

Feb 7, 2022
A small and incomplete clone of the latest version of Window. Built using react typescript, styled components and zustand for state management
A small and incomplete clone of the latest version of Window. Built using react typescript, styled components and zustand for state management

Windows 11 Browser Clone A small and incomplete clone of the latest version of Window. The project was created using React's typescript template, zust

Jan 16, 2022
Application to show and select saved tasks. React + TypeSctipt. Online version is available.
Application to show and select saved tasks. React + TypeSctipt. Online version is available.

Friendly Task Manager Application to show and select saved tasks. To create application I used: React, TypeScript Application has mobile and desktop v

Dec 23, 2021
Edux is DRY version of Redux (no constants and switches, actions and reducers are generated from single source).

Edux is Redux without (R)epetition Edux is DRY version of Redux. Edux allows to manage state of Javascript appications writing less code and still hav

Aug 5, 2019