Git Product home page Git Product logo

themeselection / materio-mui-react-nextjs-admin-template-free Goto Github PK

View Code? Open in Web Editor NEW
1.3K 25.0 489.0 2.35 MB

Materio is the Most Powerful & Comprehensive free Next.js React admin template based on MUI !! 🚀

Home Page: https://themeselection.com/products/materio-free-mui-react-nextjs-admin-template

License: MIT License

JavaScript 48.83% CSS 0.17% TypeScript 50.92% HTML 0.07%
admin-dashboard react-dashboard material-design admin-template freebies admin-dashboard-template admin-dashboards dashboard-template dashboard-templates free-react-admin-templates

materio-mui-react-nextjs-admin-template-free's Introduction

materio-logo

Most Powerful & Comprehensive Free MUI React NextJS Admin Dashboard Template built for developers!

license GitHub release (latest by date) GitHub open issues GitHub closed issues Twitter Follow

Materio – MUI React NextJS Admin Template Free

Introduction 🚀

If you’re a developer looking for the most Powerful & comprehensive Free MUI React NextJS Admin Dashboard Template built for developers, rich with features, and highly customizable, look no further than Materio. We’ve followed the highest industry standards to bring you the very best admin template that is not only easy to use but highly scalable. Offering ultimate convenience and flexibility, you’ll be able to build whatever application you want with very little hassle.

Build premium quality applications with ease. Use one of the most innovative React admin templates to create eye-catching, high-quality WebApps. Your apps will be completely responsive, ensuring they’ll look stunning and function flawlessly on desktops, tablets, and mobile devices.

Materio provides a template with Javascript and Typescript

View Demo

Installation ⚒️

Installing and running the template is super easy in Materio, please follow these steps and you should be ready to rock 🤘

  1. Make sure you have installed Node.js (LTS). If Node.js is already installed in your system, make sure the installed version is LTS (and not the latest version)
  2. Navigate to the typescript-version or javascript-version folder and run the following command to install our local dependencies listed in package.json. You can use npm OR yarn as per your preference.

It is recommended to use yarn for better dependency management

# For npm
npm install --legacy-peer-deps

# For yarn
yarn install
  1. Now, you are ready to start the server with the help of the command shown below. Open http://localhost:3000/ to check your development 🚀.
# For npm
npm run dev

# For yarn
yarn dev

What's Included 📦

  • Layouts
    • Blank
    • Full
    • Boxed
  • Dashboard
  • Pages
    • Account Settings
    • Login
    • Register
    • Error
  • Typography
  • Material Design Icons by Community
  • Basic Cards
  • Tables
  • Form Layouts

What's in Premium Version 💎

Materio Free Version Materio Premium Version
Demo Demo
Download Purchase
Simple vertical menu Vertical (+ vertical collapsed) menu & Horizontal menu
Default skin Default, bordered & semi-dark skins
1 Simple Dashboard 3 Niche Dashboards
- Multiple applications like Email, Chat, Calendar, Invoice, User List, User View, and Roles and permission
Simple from layouts Form elements, advanced form layouts, form validation & form wizard
Basic Cards Basic, Advanced, Statistics, Analytics, Gamification and Actions Cards
3 Custom Components 15 Custom Components
- Quick Search - Quickly navigate between pages (with hotkey support)
Basic tables Advanced tables + Data Grid Tables
1 Chart Library 3 Chart Libraries
User Overridable Layout User Overridable Layout & Theme
Account Settings, Login, Register, and Error pages Authentication pages in 2 Variants + Ready to use pages like User Profile, Account Settings, FAQ, Pricing and some Misc pages
Single-level menu Multi-level menu (Grouped menu items)
- Multiple navbar & footer options
- JWT Authentication
- RTL (Right-to-Left) Support
- Redux
- Access Control (ACL - CASL)
- Multi-lingual Support
- Starter-kit
- Customizer drawer to check options in live app
Limited customization Endless customization possibilities
Regular Support Premium Support

Documentation 📜

Check out our live Documentation

Browser Support 🖥️

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

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Microsoft Edge (latest)
  • Opera (latest)

Contributing 🦸

Contributions are always welcome and recommended! Here is how:

  • Fork the repository (here is the guide).
  • Clone to your machine git clone https://github.com/YOUR_USERNAME/REPO_NAME
  • Make your changes
  • Create a pull request

Contribution Requirements 🧰

  • When you contribute, you agree to give a non-exclusive license to ThemeSelection to use that contribution in any context as we (ThemeSelection) see appropriate.
  • If you use content provided by another party, it must be appropriately licensed using an open-source license.
  • Contributions are only accepted through Github pull requests.
  • Finally, the contributed code must work in all supported browsers (see above for browser support).

Creators 😇

Changelog 📆

Please refer to the CHANGELOG file. We will add detailed release notes to each new release.

NOTE 🏷️

We request you to keep the ThemeSelection credit link in the footer section.

Looking For Premium Admin Templates ?? 👀

ThemeSelection provides Selected high quality, modern design, professional and easy-to-use Free and Premium Bootstrap Admin Templates, VueJS Admin Templates, Laravel Admin Templates, React Admin Templates and Free UI Kits to create your applications faster!

If you want to Download Free Admin Templates like Materio, then do visit ThemeSelection.

Other variants

Credits 🙏

Useful Links 🎁

Social Media 🌍

materio-mui-react-nextjs-admin-template-free's People

Contributors

abhidave001 avatar jd-solanki avatar megaacheyounes avatar neelbrahmakshatriya avatar saanvi-ts avatar vrushank avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

materio-mui-react-nextjs-admin-template-free's Issues

changing colours in the ts variant

What problem does this feature solve?

how can we change the primary colours of the template? including the button hover colours? managed to change the primary button colour but not sure if it's the correct way. button hovering still shows the same default color

What does the proposed solution look like?

N/A

Cannot run after build with docker

Steps to reproduce

BUILD IMAGE WITH DOCKERFILE

What is expected?

Error MODULE_NOT_FOUND

What is actually happening?

I tried deploying them to a server with docker installed. But I try with the docker file which i get direct from Nextjs document. But when running docker, the docker side reports "Error: Cannot find module '/app/server.js'
at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
at Module._load (node:internal/modules/cjs/loader:922:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:86:12)
at node:internal/main/run_main_module:23:47 {
code: 'MODULE_NOT_FOUND',"

Additional data

images are not displayed when app is not installed in web root.

Steps to reproduce

step 1: modify "next.config.js" as below to install app to a different path:

....
module.exports = {
basePath: "/apps/materio",
...

step 2: run "npm run build"
step 3: run "npm run export"
step 4: publish app to web server (mine is powered by "nginx") by copying "out" folder to directory that maps to url path of "/apps/materio"

What is expected?

access materio app with URL: "https://localhost/apps/materio/index.html", it should work without problem. Specifically all components with images should display properly.

What is actually happening?

images in components of Materio app do not show up.

Additional data

Customizing colors of theme

Steps to reproduce

Hi!
Please clarify how to customize the colors of the theme. The documentation mentions file src/layouts/UserThemeOptions.ts but there is no such in the repository:
https://github.com/themeselection/materio-mui-react-nextjs-admin-template-free/tree/main/javascript-version/src/layoutsthe

What is expected?

UserThemeOptions.ts to be in the repo inside this directory:
https://github.com/themeselection/materio-mui-react-nextjs-admin-template-free/tree/main/javascript-version/src/layouts

What is actually happening?

There is no such file

Additional data

React does not recognize the `containerRef`

Steps to reproduce

  1. clone repo
  2. run yarn dev
  3. open developer console, you can see warning:
Warning: React does not recognize the `containerRef` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute,spell it as lowercase `containerref` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

What is expected?

no warning message

What is actually happening?

containerRef prop exists in PerfectScrollbar but not Box

Additional data

NodeJS Version: 16.1
Package manager: yarn 1.22.5
Browser name & version: brave 1.49
System: windows

Yarn.lock error

Steps to reproduce

  1. Download Github zip package
  2. Run "yarn install"

What is expected?

Installed packages successfully

What is actually happening?

error An unexpected error occurred: "Invalid value type 412:0 in C:\Users\anhch\Desktop\typescript-version\yarn.lock".

Additional data

Nothing is displayed on localhost

Steps to reproduce

  1. Navigate to javascript-version
  2. Run npm install --legacy-peer-deps
  3. Navigate to localhost
  4. Blank screen

What is expected?

Not a blank screen

What is actually happening?

A blank screen

Additional data

The application does not start correctly after the installation of its dependencies

Steps to reproduce

  1. yarn install
  2. yarn dev

What is expected?

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

What is actually happening?

Captura de pantalla 2022-06-21 a las 13 56 28

Additional data

NodeJS Version: 16.15.1 (LTS)
Package manager(npm|yarn|pnpm): yarn
Browser name & version: Google Chrome 102.0.5005.115 (Build oficial) (arm64)
System: macOS Monterey 12.2

Hydration error after Next.js and React.js version upgrade

Steps to reproduce

  • Clone the project and install dependencies.
  • run command yarn add next@latest react@latest react-dom@latest eslint-config-next@latest as mentioned in Next.js upgrade guide
  • run yarn dev

What is expected?

Template dashboard without any error should be shown.

What is actually happening?

Facing error (Can access dashboard if we close error popup) : Error: Hydration failed because the initial UI does not match what was rendered on the server.
Reference: https://nextjs.org/docs/messages/react-hydration-error

Image

Additional data

  • NodeJS Version: v18
  • Package manager(npm|yarn|pnpm): yarn
  • Browser name & version: Google Chrome@latest
  • System: Latest LTS Debian

NextJS Version Upgrade

What problem does this feature solve?

Please upgrade template because had upgrade NextJS Version

What does the proposed solution look like?

Please upgrade template because had upgrade NextJS Version

Integração com PostgreSQL

What problem does this feature solve?

Bom dia, tudo bem?
estou fazendo um teste, e preciso conectar o projeto "Materio – Free MUI React NextJS Admin Template" para puxar as informações de um banco de dados Postgres. Gostaria de ajuda e um manual para fazer essa integração. caso de certo, partiremos para a compra de um projeto, mais primeiro queríamos conectar para ver os desafios e como funcionaria.

What does the proposed solution look like?

No Projeto na tela de Dashboard, no campo SALES, gataríamos que exibisse o valor que tem dentro do banco de dados.

Informações do banco que queremos conectar
informações do registro da tabela contendo o total de vendas:
select valor from caixapdv where seq=1450

poderíamos fornecer os manuais para fazermos a integração e quais recursos e plugins usarmos?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.