NextJS version of Material Dashboard React

Overview

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

Comments
  • installation problem

    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

    opened by spirituelle 5
  • installatin issue

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

    opened by spirituelle 1
  • installation problem

    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!

    opened by spirituelle 1
  • [Bug] Won't start. Dependency issues maybe.

    [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

    opened by jonvaljonathan 2
  • [Bug] Installation Errors after download

    [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

    opened by kecampcr 4
Releases(1.1.0)
  • 1.1.0(Feb 1, 2021)

    [1.1.0] 2021-02-01

    Bug fixing

    • https://github.com/creativetimofficial/ct-nextjs-material-dashboard-pro/issues/2

    Major style changes

    Deleted components

    Added components

    Deleted dependencies

    • @types/googlemaps
    • @types/markerclustererplus
    • react-google-maps (we'll use simple Google Maps API with Vanilla JS instead)
    • webpack (next will install the appropriate one)

    Added dependencies

    Updated dependencies

    @material-ui/core       4.11.0   →   4.11.3
    @material-ui/icons       4.9.1   →   4.11.2
    next                     9.5.2   →   10.0.5
    next-compose-plugins     2.2.0   →    2.2.1
    next-images              1.3.1   →    1.7.0
    react                  16.13.1   →   17.0.1
    react-dom              16.13.1   →   17.0.1
    typescript               3.9.7   →    4.1.3
    

    Warning

    Warning

    At the moment, the pages/_app.js and pages/_document.js could not be converted to functional components - for HOOK support, since they still need some of the class comments life-cycle methods. Please check this here: https://nextjs.org/docs/advanced-features/custom-document. The TypeScript dependencies are installed only to stop console warnings on install. They are not actually used in our product. So the product is not based on TypeScript! The following warnings will appear when running the installation command, but they do not affect the UI or the functionality of the product (they will be solved in our next update):

    npm WARN [email protected] requires a peer of [email protected]^0.14.9 || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN [email protected] requires a peer of [email protected]^15.3.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN [email protected] requires a peer of [email protected]^16.3.0 but none is installed. You must install peer dependencies yourself.
    

    If they will persist in our 2.. version, we will drop their usages and replace them with other plugins. In development mode, some of the above plugins will throw a warning because they still use React v16 syntax. If the error will persist in our 2.. version, we will drop their usage and replace them with other plugins.

    Source code(tar.gz)
    Source code(zip)
  • 1.0.0(Aug 19, 2020)

    [1.0.0] 2020-08-19

    Original Release

    • Started project with NextJS
    • Added design from Material Dashboard React by Creative Tim

    Warning

    Warnings might appear while doing an npm install - they do not affect the UI or the functionality of the product, and they appear because of NodeJS and not from the product itself. While in development some of the plugins that were used for this product will throw some warnings - note, this only happens in development, the UI or the functionality of the product is not affected, also, if the issues will persist in React 17, we'll drop usage of those plugins, and replace them with other ones.

    Source code(tar.gz)
    Source code(zip)
Soft UI Dashboard React - Free Dashboard using React and Material UI

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

Creative Tim 164 Oct 3, 2022
Soft UI Dashboard React - Free Dashboard using React and Material UI

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

Creative Tim 162 Sep 28, 2022
Dashboard-reactjs-v1 - Simple dashboard with nested routes using reactjs and material-ui

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

Siyabonga Gregory 3 Aug 12, 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 CSS framework. It features over 100 UI elements, plugins, and example based built with React components.

Themesberg 658 Sep 30, 2022
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

Creative Tim 371 Sep 9, 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 Black Dashboard React is a beautiful Bootstrap 4, Reacstrap and React (create-react-app) Admin Dashboard with a huge number of c

Creative Tim 389 Sep 28, 2022
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

Creative Tim 678 Sep 28, 2022
React Dashboard - Soft UI Dashboard | AppSeed

React Dashboard - Soft UI Dashboard | AppSeed

App Generator 142 Sep 4, 2022
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

Andrew Dryuk 1 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 Re

Mira 4 Jun 15, 2022
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

null 1.2k Oct 1, 2022
Devias 59 Sep 19, 2022
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

Horia S 157 Sep 22, 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 +

Muhammad Ridho Anshory 13 Sep 23, 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

Sandy Marko Knauer 1 Sep 6, 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

Viktoriya 1 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

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

null 9 Aug 9, 2022
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

pasterakcode 1 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

Dmytro V. Dogadailo 6 Aug 5, 2019