Login
mui/material-uiMIT5 files

Material UI Nextjs

Integrates Material UI with Next.js App and Pages routers using @mui/material-nextjs, Emotion cache providers, next/font, CSS layers with Tailwind/CSS Modules, Link component prop patterns, CSS theme variables SSR notes, and App Router useSearchParams + Suspense. Use when setting up or debugging MUI in a Next.js app.

Use this skillView repositoryView on skills.sh
Specification
Skill ID
mui/material-ui/material-ui-nextjs
Publisher
mui
Repository
material-ui
Installs
0
Files
5
License
MIT
Synced
Sep 23, 2026
How to use it

Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.

mui/material-ui/material-ui-nextjsInstalls these files
  • AGENTS.md
  • README.md
  • SKILL.md
  • metadata.json
  • reference.md

What this skill tells the agent

Material UI and Next.js

Agent skill for Next.js + Material UI wiring (SSR/streaming, cache providers, fonts, layers, Link, App Router URL state). SKILL.md is the entry; AGENTS.md is the full guide.

When to apply

  • New App Router or Pages Router app using @mui/material
  • Styles missing, wrong order, or in body instead of head
  • next/font + ThemeProvider / createTheme
  • Tailwind or CSS Modules + MUI (enableCssLayer)
  • Button + component={Link} or Next.js v16 client boundary errors
  • useSearchParams / URL-driven MUI views and Suspense boundaries

Sections in AGENTS.md

AreaTopics
App RouterAppRouterCacheProvider, @emotion/cache, options, useSearchParams + <Suspense>
Pages Router_document, _app, DocumentHeadTags, AppCacheProvider
Fonts'use client' theme, next/font, CSS variables on html
CSS variablescssVariables, SSR flicker docs
CSS layersenableCssLayer, Tailwind / other CSS
LinkClient wrapper, routing guide, examples repo

Full guide

Read AGENTS.md for complete steps and doc links.

reference.md lists import paths and provider shape.

More from mui

mui/material-ui

Material UI Styling

Chooses the right Material UI styling approach (sx, styled, theme overrides, global CSS) from official MUI guidance. Use when styling @mui/material components, customizing themes, overriding slots, or comparing sx vs styled.

mui/material-ui

Material UI Theming

Guides Material UI theming and design tokens (createTheme, ThemeProvider, palette, colorSchemes, cssVariables, theme.vars, dark mode, TypeScript augmentation). Use when building or extending a theme, toggling light/dark, or aligning tokens across an app.

Use this skill in a project

Open any RiverX project, search the Skills panel for mui/material-ui/material-ui-nextjs, and install it in one click.

Use this skill