NextJS Material Kit

Open-Source NextJS Starter - LIVE DEMO. Forked from the original version crafted by Creative-Tim, for accelerated development.

NextJS Material Kit makes use of light, surface and movement. It uses a deliberate color choice, edge-to-edge imagery and large scale typography. 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 and the actions on the right.

Product Roadmap

This new design has elements that have been the result of research regarding ink and paper and the way objects and materials interact in real life. The result is a beautiful and consistent set of elements that can get you started with your next project. NextJS Material Kit is a great tool if you are looking to create a web presence for your web application and need to be consistent, leaving the impression of visually similar elements. It is also a great resource in its own right, looking gorgeous and helping you build your web pages.

Quick start

Step #1 - Clone the repo

$ git clone https://github.com/app-generator/nextjs-material-kit
$ cd nextjs-material-kit

Step #2 - Install modules

$ yarn 
// OR
$ npm i

Step #3 - Start the app

$ yarn start
// OR
$ npm run start

Step #4 - Static Export

$ yarn export
// OR
$ npm run export

The static site is generate in the out directory.

File Structure

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

nextjs-material-kit
.
 CHANGELOG.md
 ISSUE_TEMPLATE.md
 LICENSE.md
 README.md
 next.config.js
 package.json
 Documentation
  assets
  tutorial-components.html
 assets
  css
  img
   examples
   faces
  jss
   nextjs-material-kit
    components
    pages
        componentsSections
        landingPageSections
   nextjs-material-kit.js
  scss
      core
       mixins
       variables
      plugins
      nextjs-material-kit.scss
 pages
  _app.js
  _document.js
  _error.js
  components.js
  index.js
  landingpage.js
  loginpage.js
  profilepage.js
 components
  Badge
   Badge.js
  Card
   Card.js
   CardBody.js
   CardFooter.js
   CardHeader.js
  Clearfix
   Clearfix.js
  CustomButtons
   Button.js
  CustomDropdown
   CustomDropdown.js
  CustomInput
   CustomInput.js
  CustomLinearProgress
   CustomLinearProgress.js
  CustomTabs
   CustomTabs.js
  Footer
   Footer.js
  Grid
   GridContainer.js
   GridItem.js
  Header
   Header.js
   HeaderLinks.js
  InfoArea
   InfoArea.js
  NavPills
   NavPills.js
  PageChange
   PageChange.js
  Pagination
   Pagination.js
  Parallax
   Parallax.js
  Snackbar
   SnackbarContent.js
  Typography
      Danger.js
      Info.js
      Muted.js
      Primary.js
      Quote.js
      Small.js
      Success.js
      Warning.js
 pages-sections
     Components-Sections
      SectionBasics.js
      SectionCarousel.js
      SectionCompletedExamples.js
      SectionDownload.js
      SectionExamples.js
      SectionJavascript.js
      SectionLogin.js
      SectionNavbars.js
      SectionNotifications.js
      SectionPills.js
      SectionTabs.js
      SectionTypography.js
     LandingPage-Sections
         ProductSection.js
         TeamSection.js
         WorkSection.js

License

@MIT

NextJS Material Kit - Actively supported by AppSeed and Creative-Tim.