Materio MUI NextJS Admin Template Free

The Materio Free version is a comprehensive MUI NextJS admin dashboard template. It includes:

Core Features

• Next.js with App Router support
• Integrated MUI & Tailwind CSS
• TypeScript & JavaScript support
• ESLint (Linter) and Prettier (Formatter)
• VSCode configuration (Settings, Extensions, Snippets)
• Absolute Imports with aliases
• Minified HTML & CSS, Live reload, and Cache busting
• SEO-friendly and Production-ready

Included Components

• Layouts: Blank, Full, and Boxed
• Dashboard: 1 simple dashboard
• Pages: Account Settings, Login, Register, Forgot Password, Error, and Under Maintenance
• UI Elements: Iconify Icons, Basic Cards, and Form Layouts

To start the Materio MUI Next.js admin template in development mode, run the appropriate command for your package manager. Once started, you can view the application at http://localhost:3000. The application supports Hot Module Replacement (HMR), meaning the page will auto-update as you modify files like app/page.tsx.

npm run dev
# or
yarn dev
# or
pnpm dev

Follow these steps to set up the development environment for the Materio template:

1. Prerequisites: Ensure you have Node.js LTS installed (do not use the 'current' version).
2. Navigate to Version Folder: Enter either the typescript-version or javascript-version directory.
3. Install Dependencies: Run the installation command using your preferred package manager (pnpm is recommended):
   • Using pnpm: pnpm install
   • Using yarn: yarn install
   • Using npm: npm install
4. Configure Environment: Rename the .env.example file to .env.
5. Start Development Server: Run the dev command to start the server at http://localhost:3000:
   • Using pnpm: pnpm dev
   • Using yarn: yarn dev
   • Using npm: npm run dev

# Example using pnpm (recommended)
pnpm install
pnpm dev

The SettingsContext provides a centralized way to manage application-wide settings, such as the color mode (e.g., light or dark). It allows you to update global settings that persist via cookies, or page-specific settings that revert when navigating away.

Available Context Properties

• settings: The current Settings object.
• updateSettings(settings, options?): Updates global settings. By default, it persists changes to a cookie.
• isSettingsChanged: A boolean indicating if the current settings differ from the initial configuration.
• resetSettings(): Resets all settings to their initial values.
• updatePageSettings(settings): Updates settings for the current page only. It returns a cleanup function that should be called (e.g., in a useEffect return) to revert the settings when the component unmounts.

The VerticalNavProvider component provides a context for managing the state of the vertical navigation menu, including its width, toggle status, and breakpoint responsiveness. Wrap your application (or the relevant part of the layout) with this provider to enable vertical navigation control across your components.

State Properties

The context exposes the following VerticalNavState properties:

• width: The current width of the navigation.
• isToggled: A boolean indicating if the navigation is toggled (e.g., collapsed or mobile view).
• isBreakpointReached: Indicates if the current viewport has reached a defined breakpoint.
• transitionDuration: The duration of the navigation transition animations.

The options prop in OptionMenu accepts an array of OptionType. Each item in the array can take one of three forms:

1. String: A simple text menu item. Clicking it closes the menu.

   • Example: 'Simple Item'

2. Divider Object: Renders an MUI Divider.

   • Example: { divider: true, dividerProps: { sx: { ... } } }

3. Option Object: A complex menu item with metadata.

   • text: The label of the menu item.
   • icon: A string (class name) or a React node.
   • href: If provided, the item renders as a Link (using Next.js Link) instead of a standard MenuItem.
   • menuItemProps: Props to spread onto the MUI MenuItem (e.g., onClick, color, sx).
   • linkProps: Props to spread onto the Next.js Link component if href is present.

The UpgradeToProButton component relies on an environment variable to determine the destination of the 'Demo' button within its tooltip. Set this variable in your .env or .env.local file to control where users are redirected.

Key:

• NEXT_PUBLIC_PRO_URL: The URL for the Pro version demo.

The UpgradeToProButton component uses an environment variable to determine the destination of the 'Demo' button inside its tooltip. To customize this link, set the following variable in your .env or .env.local file:

NEXT_PUBLIC_PRO_URL