creativetimofficial / nextjs-material-dashboard

NextJS version of Material Dashboard React

Material Dashboard React

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.

Special thanks go to:

• Nepcha Analytics for the analytics tool. Nepcha is already integrated with Next.js Material Dashboard. You can use it to gain insights into your sources of traffic.

Table of Contents

• Versions
• Demo
• Quick Start
• Documentation
• File Structure
• Browser Support
• Resources
• Kit Versions
• Pro Versions
• Pro Kit Versions
• Reporting Issues
• Technical Support or Questions
• Licensing
• Useful Links

Versions

NextJS	NodeJS	Laravel	Vue & Laravel	Vuetify

HTML Dark	HTML	React	Vue	Angular

Demo

• Start page
• User profile page
• Tables page
• Maps Page
• Notifications page

View More.

Quick start

Quick start options:

• npm i nextjs-material-dashboard
• Clone the repo: git clone https://github.com/creativetimofficial/nextjs-material-dashboard.git.
• Download from Github.
• Download from Creative Tim.

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

• Demo: https://demos.creative-tim.com/nextjs-material-dashboard
• Download Page: https://www.creative-tim.com/product/nextjs-material-dashboard
• Documentation: https://www.creative-tim.com/learning-lab/nextjs/overview/material-dashboard
• License Agreement: https://www.creative-tim.com/license
• Support: https://www.creative-tim.com/contact-us
• Issues: Github Issues Page
• Nepcha Analytics - Analytics tool for your website

Kit Versions

NextJS	React Native	Vue	Ghost

HTML	React

Pro Versions

NextJS	Laravel	Vue & Laravel	Vuetify

HTML	React	Vue	Angular

Pro Kit Versions

NextJS	React Native	Vue	Laravel

HTML	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

• Copyright 2021 Creative Tim (https://www.creative-tim.com)
• Licensed under MIT (https://github.com/creativetimofficial/nextjs-material-dashboard/blob/master/LICENSE.md)

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

nextjs-material-dashboard's Issues

[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?

[kecamp@sabpkecamp 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! react@"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.9 || ^15.0.0 || ^16.0.0" from [email protected]
npm ERR! node_modules/react-chartist
npm ERR! react-chartist@"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

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! react@"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.9 || ^15.0.0 || ^16.0.0" from [email protected]
npm ERR! node_modules/react-chartist
npm ERR! react-chartist@"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

[Bug] Images cannot be imported (Error: Image import "assets/img/favicon.png" is not a valid image file. The image may be corrupted or an unsupported format.)

Version

last

Reproduction link

https://jsfiddle.net/6xofdkw9/

Operating System

Windows 10

Device

Lenovo laptop

Browser & Version

Chrome@latest

Steps to reproduce

1. download the current zip file of the app from website
2. npm update to update depencies to latest lts version
3. modify next.config.js to the mentioned code in JSFiddle
4. npm run dev

What is expected?

App runs without error

What is actually happening?

This error displaying for each image in terminal (one error at once, but when remove the codes of that image on file, next error displays):

Error: Image import "assets/img/favicon.png" is not a valid image file. The image may be corrupted or an unsupported format.

---

Solution

Additional comments

the solution should work for all images + images which will be added later

Nextjs 14

Hi,
Do you have Nextjs14 template available? we are trying to reach you by email but couldn't hear you back. As you existing template is based on nextjs10 we are unable to use latest packages of reactjs. Please reply here or in email urgently.

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! react@"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.9 || ^15.0.0 || ^16.0.0" from [email protected]
npm ERR! node_modules/react-chartist
npm ERR! react-chartist@"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!

[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! react@"17.0.1" from the root project
   npm ERR!
   npm ERR! Could not resolve dependency:
   npm ERR! peer react@"^15.3.0 || ^16.0.0" from [email protected]
   npm ERR! node_modules/react-swipeable-views
   npm ERR! react-swipeable-views@"0.13.9" from the root project

// also happens with react-chartist

4. delete package-lock.json and /node_modules
5. run npm install --save --legacy-peer-deps
6. 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

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: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.9 || ^15.0.0 || ^16.0.0" from [email protected]
npm ERR! node_modules/react-chartist
npm ERR! react-chartist@"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!