### Download and Install Example

Source: https://github.com/bichu1010/material-ui/blob/master/examples/material-ui-preact/README.md

This snippet shows how to download the Material UI Preact example using curl and then install its dependencies and start the development server using npm.

```bash
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-ui-preact
cd material-ui-preact
npm install
npm run start
```

--------------------------------

### Setup Joy UI with Vite.js and TypeScript

Source: https://github.com/bichu1010/material-ui/blob/master/examples/joy-ui-vite-ts/README.md

This snippet demonstrates the basic setup and commands to get started with a Joy UI project using Vite.js and TypeScript. It includes downloading the example, navigating to the directory, installing dependencies, and running the development server. No external dependencies beyond Node.js are required.

```bash
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/joy-ui-vite-ts
cd joy-ui-vite-ts
npm install
npm run dev
```

--------------------------------

### Download and Run Material UI x Pigment CSS Vite Example

Source: https://github.com/bichu1010/material-ui/blob/master/examples/material-ui-pigment-css-vite-ts/README.md

This snippet shows how to download the example project using curl and tar, navigate into the project directory, install dependencies with npm, and start the development server with npm run dev. It's a quick way to get the example running locally.

```bash
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-pigment-css-vite-ts
cd material-ui-pigment-css-vite-ts
npm install
npm run dev
```

--------------------------------

### Clone and Install Material UI Next.js Example

Source: https://github.com/bichu1010/material-ui/blob/master/examples/material-ui-nextjs/README.md

This snippet shows how to download the example project using curl, extract it, navigate into the project directory, install dependencies using npm, and start the development server.

```bash
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-ui-nextjs
cd material-ui-nextjs
npm install
npm run dev
```

--------------------------------

### Download and Install Joy UI CRA TS Example

Source: https://github.com/bichu1010/material-ui/blob/master/examples/joy-ui-cra-ts/README.md

This snippet demonstrates how to download and set up the Joy UI Create React App example project using TypeScript. It utilizes `curl` to fetch the project and `cd` to navigate into the example directory. Dependencies are installed using `npm install`, and the application is started with `npm start`.

```bash
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/joy-ui-cra-ts
cd joy-ui-cra-ts
npm install
npm start
```

--------------------------------

### Install and Run Material UI Vite TS Example

Source: https://github.com/bichu1010/material-ui/blob/master/examples/material-ui-vite-ts/README.md

This snippet shows how to download the example project, install its dependencies using npm, and start the development server. It assumes you have Node.js and npm installed.

```bash
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-vite-ts
cd material-ui-vite-ts
npm install
npm run dev
```

--------------------------------

### Download and Install Material UI Vite Example

Source: https://github.com/bichu1010/material-ui/blob/master/examples/material-ui-vite/README.md

This snippet shows how to download the example project using curl, extract it, navigate into the project directory, install dependencies with npm, and start the development server.

```bash
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-vite
cd material-ui-vite
npm install
npm run dev
```

--------------------------------

### Download and Run Joy UI Next.js Example

Source: https://github.com/bichu1010/material-ui/blob/master/examples/joy-ui-nextjs-ts/README.md

This snippet shows how to download the example project using curl and tar, navigate into the project directory, install dependencies with npm, and start the development server.

```bash
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/joy-ui-nextjs-ts
cd joy-ui-nextjs-ts
npm install
npm run dev
```

--------------------------------

### Download and Install Example Project

Source: https://github.com/bichu1010/material-ui/blob/master/examples/material-ui-nextjs-ts/README.md

This bash script downloads the Material UI Next.js App Router example, extracts it, navigates into the project directory, installs dependencies, and starts the development server.

```bash
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-ui-nextjs-ts
cd material-ui-nextjs-ts
npm install
npm run dev
```

--------------------------------

### Fast Track Pigment CSS Installation (Next.js & Vite)

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/material/experimental-api/pigment-css/pigment-css.md

Quickly set up a new project with Pigment CSS using provided commands for either Next.js or Vite. This involves downloading example project templates and navigating into the project directory.

```bash
curl https://codeload.github.com/mui/pigment-css/tar.gz/master | tar -xz --strip=2  pigment-css-master/examples/pigment-css-nextjs-ts
cd pigment-css-nextjs-ts
```

```bash
curl https://codeload.github.com/mui/pigment-css/tar.gz/master | tar -xz --strip=2 pigment-css-master/examples/pigment-css-vite-ts
cd pigment-css-vite-ts
```

--------------------------------

### Material UI Component Installation and Import (JavaScript)

Source: https://github.com/bichu1010/material-ui/blob/master/docs/pages/blog/material-ui-v1-is-out.md

Demonstrates the simplified installation and import process for Material UI components. It requires no polyfills or specific build tools, reducing initial setup friction.

```javascript
1. npm install @mui/material
2. import Button from '@mui/material/Button';
```

--------------------------------

### Manual Pigment CSS Installation (Next.js & Vite)

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/material/experimental-api/pigment-css/pigment-css.md

Install Pigment CSS and its corresponding framework plugin for existing Next.js or Vite projects. This includes installing the core React package and the specific build tool plugin.

```bash
npm install @pigment-css/react
npm install --save-dev @pigment-css/nextjs-plugin
```

```bash
npm install @pigment-css/react
npm install --save-dev @pigment-css/vite-plugin
```

--------------------------------

### Install and Run Material UI SSR Example (Bash)

Source: https://github.com/bichu1010/material-ui/blob/master/examples/material-ui-express-ssr/README.md

This snippet shows how to download, install, and run the Material UI server-side rendered example using npm. It assumes you have Node.js and npm installed.

```bash
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-ui-express-ssr
cd material-ui-express-ssr
npm install
npm run start
```

--------------------------------

### Install Material UI with styled-components

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/material/getting-started/installation/installation.md

Install Material UI along with the styled-components engine. This alternative setup requires installing '@mui/styled-engine-sc' and 'styled-components'. Available for npm, pnpm, and yarn.

```bash
npm install @mui/material @mui/styled-engine-sc styled-components
```

```bash
pnpm add @mui/material @mui/styled-engine-sc styled-components
```

```bash
yarn add @mui/material @mui/styled-engine-sc styled-components
```

--------------------------------

### Install MUI System with npm, pnpm, or yarn

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/system/getting-started/installation/installation.md

Installs the core MUI System package along with Emotion for styling. This is the default installation method. Ensure React is installed as a peer dependency.

```bash
npm install @mui/system @emotion/react @emotion/styled
```

```bash
pnpm add @mui/system @emotion/react @emotion/styled
```

```bash
yarn add @mui/system @emotion/react @emotion/styled
```

--------------------------------

### Install Material-UI v1.x Alongside v0.x

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/material/migration/migration-v0x/migration-v0x.md

Instructions for installing both Material-UI v0.x and v1.x packages simultaneously using either Yarn or npm. This is the first step in a phased migration process.

```bash
yarn add material-ui
yarn add @material-ui/core
```

```bash
npm install material-ui
npm install @material-ui/core
```

--------------------------------

### Download and Install Material UI Next.js Pages Router Example

Source: https://github.com/bichu1010/material-ui/blob/master/examples/material-ui-nextjs-pages-router/README.md

This snippet provides the bash commands to download, extract, install dependencies, and run the Material UI Next.js Pages Router example project. It utilizes curl for downloading and npm for package management.

```bash
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-ui-nextjs-pages-router
cd material-ui-nextjs-pages-router
npm install
npm run dev
```

--------------------------------

### Install MUI System with styled-components

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/system/getting-started/installation/installation.md

Installs MUI System and configures it to use styled-components as the styling engine instead of Emotion. Note: styled-components may have compatibility issues with server-rendered Material UI projects.

```bash
npm install @mui/system @mui/styled-engine-sc styled-components
```

```bash
pnpm add @mui/system @mui/styled-engine-sc styled-components
```

```bash
yarn add @mui/system @mui/styled-engine-sc styled-components
```

--------------------------------

### Download and Install Material UI Example

Source: https://github.com/bichu1010/material-ui/blob/master/examples/material-ui-vite-tailwind-ts/README.md

Instructions to download the Material UI Vite + Tailwind CSS example using curl and install its dependencies using npm. This sets up the project for local development.

```bash
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-vite-tailwind-ts
cd material-ui-vite-tailwind-ts
npm install
npm run dev
```

--------------------------------

### Install Material UI v5 Core and Styles Packages

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/material/migration/migration-v4/migration-v4.md

Installs the necessary Material UI v5 packages, including the core components and the styles package which is required for older JSS-based utilities.

```bash
npm install @mui/material @mui/styles
```

```bash
yarn add @mui/material @mui/styles
```

--------------------------------

### Install Material UI with npm, pnpm, or yarn

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/material/getting-started/installation/installation.md

Install the core Material UI package along with Emotion for styling. This is the default setup and requires React and ReactDOM as peer dependencies. Available for npm, pnpm, and yarn package managers.

```bash
npm install @mui/material @emotion/react @emotion/styled
```

```bash
pnpm add @mui/material @emotion/react @emotion/styled
```

```bash
yarn add @mui/material @emotion/react @emotion/styled
```

--------------------------------

### Install Material-UI with npm, pnpm, or yarn

Source: https://github.com/bichu1010/material-ui/blob/master/docs/pages/experiments/docs/codeblock.md

Demonstrates how to install the Material-UI library and its peer dependencies using common package managers. Note that `@emotion/react` and `@emotion/styled` are required peer dependencies.

```bash
npm install @mui/material @emotion/react @emotion/styled
# `@emotion/react` and `@emotion/styled` are peer dependencies
```

```bash
pnpm add @mui/material @emotion/react @emotion/styled
# `@emotion/react` and `@emotion/styled` are peer dependencies
```

```bash
yarn add @mui/material @emotion/react @emotion/styled
# `@emotion/react` and `@emotion/styled` are peer dependencies
```

--------------------------------

### Install Joy UI with npm, pnpm, or yarn

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/joy/getting-started/installation/installation.md

Installs the Joy UI library and its associated React styling dependencies (@emotion/react, @emotion/styled) using the specified package manager.

```bash
npm install @mui/joy @emotion/react @emotion/styled
```

```bash
pnpm add @mui/joy @emotion/react @emotion/styled
```

```bash
yarn add @mui/joy @emotion/react @emotion/styled
```

--------------------------------

### Button Component Usage Example (React)

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/joy/getting-started/usage/usage.md

Demonstrates how to import and use the Joy UI Button component. It shows a basic usage and suggests experimenting with props like 'variant' to observe style changes. This example is intended for React applications.

```javascript
import * as React from 'react';
import Button from '@mui/joy/Button';

export default function ButtonUsage() {
  return (
    <Button variant="solid">
      Solid button
    </Button>
  );
}
```

--------------------------------

### Using v0.x and v1.x ThemeProviders Simultaneously

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/material/migration/migration-v0x/migration-v0x.md

Provides a React component example showing how to use both `MuiThemeProvider` from v1.x and `MuiThemeProvider` from v0.x within the same application. This allows for gradual theme migration.

```jsx
import * as React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
import { MuiThemeProvider as V0MuiThemeProvider } from 'material-ui';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

const theme = createMuiTheme({
  /* theme for v1.x */
});
const themeV0 = getMuiTheme({
  /* theme for v0.x */
});

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <V0MuiThemeProvider muiTheme={themeV0}>{/*Components*/}</V0MuiThemeProvider>
    </MuiThemeProvider>
  );
}

export default App;
```

--------------------------------

### React Admin Setup with Simple REST Provider

Source: https://github.com/bichu1010/material-ui/blob/master/docs/pages/blog/making-customizable-components.md

This example demonstrates the basic setup of a React-Admin application using the `simpleRestProvider` to connect to a REST API. It defines an `Admin` component that wraps `Resource` components, specifying the data provider and the list view for a 'users' resource.

```jsx
import * as React from 'react';
import { Admin, Resource, ListGuesser } from 'react-admin';
import simpleRestProvider from 'ra-data-simple-rest';

const dataProvider = simpleRestProvider('https://domain.tld/api');

export default function App() {
  return (
    <Admin dataProvider={dataProvider}>
      <Resource name="users" list={ListGuesser} />
    </Admin>
  );
}
```

--------------------------------

### Create Styled Components with Pigment CSS

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/material/experimental-api/pigment-css/pigment-css.md

Demonstrates how to create a basic styled div component using the `styled` API from Pigment CSS. This ensures styles are scoped to the component, improving modularity and maintainability.

```javascript
import { styled } from '@pigment-css/react';

const Heading = styled('div')({
  fontSize: '2rem',
  color: '#9FADBC',
  fontWeight: 'bold',
  margin: '1rem',
});
```

--------------------------------

### Migrate MuiPickersUtilsProvider to LocalizationProvider

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/material/migration/pickers-migration/pickers-migration.md

Shows the transition from MuiPickersUtilsProvider to LocalizationProvider in @mui/lab. The new approach simplifies date handling and removes the need for manual date-io adapter installation, as everything is included with the lab package.

```jsx
```jsx
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';


function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      ...
    </LocalizationProvider>
  )
);
```
```

--------------------------------

### Start Local Material UI Documentation Site

Source: https://github.com/bichu1010/material-ui/blob/master/CONTRIBUTING.md

Starts the local development server for the Material UI documentation site, allowing you to view and test changes in real-time.

```bash
pnpm start
```

--------------------------------

### Install Material UI v5 Icons Package

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/material/migration/migration-v4/migration-v4.md

Installs the `@mui/icons-material` package for Material UI v5, which provides access to Material Design icons.

```bash
npm install @mui/icons-material
```

```bash
yarn add @mui/icons-material
```

--------------------------------

### Install Material UI v5 Lab Package

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/material/migration/migration-v4/migration-v4.md

Installs the `@mui/lab` package for Material UI v5, which contains components that were previously available in `@material-ui/lab`.

```bash
npm install @mui/lab
```

```bash
yarn add @mui/lab
```

--------------------------------

### Install MUI X Premium Package (npm)

Source: https://github.com/bichu1010/material-ui/blob/master/docs/pages/blog/premium-plan-release.md

Installs the `@mui/x-data-grid-premium` package using npm. This package includes all features from the Community and Pro plans, plus premium features. Ensure you have a Premium license to remove the watermark and use in production.

```javascript
npm install @mui/x-data-grid-premium
```

--------------------------------

### Install Emotion Peer Dependencies for Material UI v5

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/material/migration/migration-v4/migration-v4.md

Installs the required Emotion packages (`@emotion/react` and `@emotion/styled`) which are the default styling engine for Material UI v5.

```bash
npm install @emotion/react @emotion/styled
```

```bash
yarn add @emotion/react @emotion/styled
```

--------------------------------

### Create and Start a Playground for Testing

Source: https://github.com/bichu1010/material-ui/blob/master/CONTRIBUTING.md

Generates a new isolated playground environment and starts the documentation site. This is useful for testing component changes without affecting existing demos.

```bash
pnpm docs:create-playground && pnpm start
```

--------------------------------

### Clone and Setup Material UI Repository

Source: https://github.com/bichu1010/material-ui/blob/master/CONTRIBUTING.md

This snippet demonstrates cloning the Material UI repository, setting up the upstream remote, and synchronizing the local master branch with the upstream.

```bash
git clone https://github.com/<your username>/material-ui.git
cd material-ui
git remote add upstream https://github.com/mui/material-ui.git
git checkout master
git pull upstream master
```

--------------------------------

### Setup and Run Unit Tests with createRenderer

Source: https://github.com/bichu1010/material-ui/blob/master/test/README.md

Demonstrates how to use `createRenderer` from `@mui/internal-test-utils` to set up a test suite. This function returns a `render` function similar to `@testing-library/react`'s, providing a pre-configured environment for rendering React components in tests.

```javascript
import { createRenderer } from '@mui/internal-test-utils';

describe('test suite', () => {
  const { render } = createRenderer();

  test('first', () => {
    render(<input />);
  });
});
```

--------------------------------

### Augmenting HTMLAttributes for sx Prop

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/material/experimental-api/pigment-css/pigment-css.md

Provides a TypeScript example of augmenting the `HTMLAttributes` interface to correctly type the `sx` prop when used on HTML elements. This ensures type safety for inline styles.

```typescript
type Theme = {
  // your theme type
};

declare global {
  namespace React {
    interface HTMLAttributes<T> {
      sx?:
        | React.CSSProperties
        | ((theme: Theme) => React.CSSProperties)
        | ReadonlyArray<
            React.CSSProperties | ((theme: Theme) => React.CSSProperties)
          >;
    }
  }
}
```

--------------------------------

### Package and Build Material-UI Locally - Bash

Source: https://github.com/bichu1010/material-ui/blob/master/CONTRIBUTING.md

This script demonstrates the process of packaging a Material-UI package locally. It involves navigating to the package directory, building it, changing to the build directory, and then packing the package.

```bash
$> cd packages/mui-material # or path to any other mui package
$packages\mui-material> pnpm build
$packages\mui-material> cd ./build
$packages\mui-material> pnpm pack

```

--------------------------------

### React App Setup with Material-UI and CDN Imports

Source: https://github.com/bichu1010/material-ui/blob/master/examples/material-ui-via-cdn/index.html

This snippet demonstrates the core structure of a React application using Material-UI components imported via CDN links. It initializes a theme, defines custom components like 'ProTip' and 'Copyright', and renders them within a 'ThemeProvider'. It also includes 'CssBaseline' for consistent styling and uses 'createRoot' for rendering the application.

```javascript
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import {
  colors,
  CssBaseline,
  ThemeProvider,
  Typography,
  Container,
  createTheme,
  Box,
  SvgIcon,
  Link,
} from '@mui/material';

// Create a theme instance.
const theme = createTheme({
  cssVariables: true,
  palette: {
    primary: {
      main: '#556cd6',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: colors.red.A400,
    },
  },
});

function LightBulbIcon(props) {
  return (
    <SvgIcon {...props}>
      <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
    </SvgIcon>
  );
}

function ProTip() {
  return (
    <Typography sx={{ mt: 6, mb: 3, color: 'text.secondary' }}>
      <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
      {'Pro tip: See more '}
      <Link href="https://mui.com/material-ui/getting-started/templates/">templates</Link>
      {' in the Material UI documentation.'}
    </Typography>
  );
}

function Copyright() {
  return (
    <Typography variant="body2" color="text.secondary" align="center">
      {'Copyright © '}
      <Link color="inherit" href="https://mui.com/">
        Your Website
      </Link>
      {' '}
      {new Date().getFullYear()}
      {'.'} 
    </Typography>
  );
}

function App() {
  return (
    <Container maxWidth="sm">
      <Box sx={{ my: 4 }}>
        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
          Material UI CDN example
        </Typography>
        <ProTip />
        <Copyright />
      </Box>
    </Container>
  );
}

const root = createRoot(document.getElementById('root'));
root.render(
  <ThemeProvider theme={theme}>
    {/*****
     * CssBaseline kickstart an elegant, consistent, and simple baseline to build upon.
     *****/}
    <CssBaseline />
    <App />
  </ThemeProvider>,
);

```

--------------------------------

### Install MUI X Premium Package (yarn)

Source: https://github.com/bichu1010/material-ui/blob/master/docs/pages/blog/premium-plan-release.md

Installs the `@mui/x-data-grid-premium` package using yarn. This package provides access to premium features and consolidates Community and Pro functionalities. A Premium license is required for production use and to disable the watermark.

```javascript
yarn add @mui/x-data-grid-premium
```

--------------------------------

### Download and Run Material UI CDN Example (Bash)

Source: https://github.com/bichu1010/material-ui/blob/master/examples/material-ui-via-cdn/README.md

This snippet shows how to download the Material UI CDN example project using curl and tar, and then how to run the example using either React 19+ or React 18 by opening the respective HTML files. It requires bash-compatible shell.

```bash
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-ui-via-cdn
cd material-ui-via-cdn
```

```bash
# React 19 or later
open index.html
# React 18
open react-18-example.html
```

--------------------------------

### Joy UI Peer Dependencies (React and ReactDOM)

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/joy/getting-started/installation/installation.md

Specifies the required versions of React and ReactDOM that must be installed in your project before installing Joy UI. This ensures compatibility with the Joy UI library.

```json
"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
}
```

--------------------------------

### Create and Push a New Topic Branch

Source: https://github.com/bichu1010/material-ui/blob/master/CONTRIBUTING.md

Guides on creating a new local branch for development and pushing it to your forked repository.

```bash
git checkout -b my-topic-branch
git push -u origin HEAD
```

--------------------------------

### Change Material-UI Styles Import Path

Source: https://github.com/bichu1010/material-ui/blob/master/docs/pages/blog/september-2019-update.md

Illustrates the change in import paths for Material-UI styling utilities from `@mui/styles` to `@mui/material/styles`, starting from v4.5.1. This change aims to reduce confusion caused by duplicate import paths and prevent the unnecessary duplication of `@mui/styles` in application bundles. It simplifies setup by removing the need to install the `@mui/styles` package separately.

```diff
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from '@mui/material/styles';
```

--------------------------------

### Implement Material Design 3 Typography System with Joy UI

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/joy/customization/theme-typography/theme-typography.md

Showcases the implementation of Google's Material Design 3 typography system using Joy UI components. This example illustrates how to structure text content according to M3 guidelines, ensuring visual consistency. It requires a React setup with Joy UI installed.

```typescript
import * as React from 'react';
import Typography from '@mui/joy/Typography';

export default function Demo() {
  return (
    <>
      <Typography level="h1">Display Large</Typography>
      <Typography level="h2">Display Medium</Typography>
      <Typography level="h3">Headline Large</Typography>
      <Typography level="h4">Title Large</Typography>
      <Typography level="body1">Body Large</Typography>
      <Typography level="body2">Body Medium</Typography>
      <Typography level="small">Label Small</Typography>
    </>
  );
}
```

--------------------------------

### MUI System React Peer Dependency

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/system/getting-started/installation/installation.md

Specifies the required React version for MUI System. React is a peer dependency, meaning it must be installed separately in your project.

```json
"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
}
```

--------------------------------

### Install and Configure react-is for React 18 and below

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/material/getting-started/installation/installation.md

Instructions for installing a specific version of 'react-is' and configuring 'overrides' or 'resolutions' in package.json. This is necessary for React 18 and below to prevent runtime errors caused by mismatched react-is versions. Supports npm, pnpm, and yarn.

```bash
npm install react-is@18.3.1
```

```bash
pnpm add react-is@18.3.1
```

```bash
yarn add react-is@18.3.1
```

--------------------------------

### Creating Custom Components with styled() Options

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/system/styled/styled.md

Demonstrates advanced usage of `styled()` by providing options such as `name` and `slot` for better theming integration and debugging. This example shows how to create a custom component with specific naming conventions for theme overrides and variant resolution.

```javascript
import * as React from 'react';
import { styled } from '@mui/material/styles';

const MyCustomComponent = styled('button', {
  name: 'MuiMyCustom', // Internal name
  slot: 'Root', // Root slot
  overridesResolver: (props, styles) => {
    const { color, variant } = props;

    return [
      styles.root,
      color === 'primary' && styles.colorPrimary,
      variant === 'contained' && styles.contained,
    ];
  },
})(    ({ theme }) => ({
  backgroundColor: 'black',
  color: theme.palette.common.white,
  padding: theme.spacing(1, 2),

  // We also support the `color` and `variant` prop
  ...(color === 'primary' && {
    backgroundColor: theme.palette.primary.main,
  }),
  ...(variant === 'contained' && {
    boxShadow: theme.shadows[3],
  }),
})
);

function App() {
  return (
    <React.Fragment>
      <MyCustomComponent>
        Default
      </MyCustomComponent>
      <MyCustomComponent color="primary" variant="contained">
        Primary Contained
      </MyCustomComponent>
    </React.Fragment>
  );
}
```

--------------------------------

### Next.js App Router Setup with Material UI

Source: https://context7.com/bichu1010/material-ui/llms.txt

This snippet demonstrates a complete Next.js App Router setup utilizing Material UI. It includes theme configuration, layout setup with AppRouterCacheProvider and ThemeProvider, and a basic page example with Material UI components. Dependencies include @mui/material, @mui/material-nextjs, and next/font/google.

```tsx
// src/theme.ts
'use client';
import { createTheme } from '@mui/material/styles';
import { Roboto } from 'next/font/google';

const roboto = Roboto({
  weight: ['300', '400', '500', '700'],
  subsets: ['latin'],
  display: 'swap',
});

const theme = createTheme({
  colorSchemes: { light: true, dark: true },
  cssVariables: {
    colorSchemeSelector: 'class',
  },
  typography: {
    fontFamily: roboto.style.fontFamily,
  },
});

export default theme;

// src/app/layout.tsx
import * as React from 'react';
import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import theme from '../theme';

export default function RootLayout({
  children,
}: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <AppRouterCacheProvider options={{ enableCssLayer: true }}>
          <ThemeProvider theme={theme}>
            <CssBaseline />
            {children}
          </ThemeProvider>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

// src/app/page.tsx
import * as React from 'react';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Link from '@mui/material/Link';
import NextLink from 'next/link';

export default function Home() {
  return (
    <Container maxWidth="lg">
      <Box
        sx={{
          my: 4,
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
          Material UI - Next.js App Router
        </Typography>
        <Link href="/about" color="secondary" component={NextLink}>
          Go to the about page
        </Link>
        <Button variant="contained" sx={{ mt: 2 }}>
          Get Started
        </Button>
      </Box>
    </Container>
  );
}

```

--------------------------------

### Start Development Server Commands

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md

Provides commands to start the development server using different package managers (npm, pnpm, yarn) after configuring Pigment CSS with Material UI. These commands are essential for running the application and viewing the integrated styles.

```bash
npm run dev
```

```bash
pnpm dev
```

```bash
yarn dev
```

--------------------------------

### Custom Autocomplete Filter - Match from Start

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/material/components/autocomplete/autocomplete.md

A specific example of using `createFilterOptions` to configure the Autocomplete so that options must start with the input query prefix. This is useful for scenarios where exact prefix matching is desired.

```jsx
import { Autocomplete } from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import { createFilterOptions } from '@mui/material/Autocomplete';

const filterOptions = createFilterOptions({
  matchFrom: 'start',
  stringify: (option) => option.title,
});

function FilterStartAutocomplete() {
  const options = [
    { title: 'The Shawshank Redemption' },
    { title: 'The Godfather' },
    // ... more options
  ];

  return (
    <Autocomplete
      filterOptions={filterOptions}
      options={options}
      getOptionLabel={(option) => option.title}
      renderInput={(params) => (
        <TextField {...params} label="Filter from start" />
      )}
    />
  );
}
```

--------------------------------

### Button Component Example (JavaScript/JSX)

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/material/getting-started/usage/usage.md

Demonstrates basic usage of the Material UI Button component, allowing developers to quickly integrate and test its functionality. This example focuses on changing the 'variant' prop to observe style variations.

```jsx
import Button from '@mui/material/Button';

function MyButton() {
  return <Button variant="outlined">Button</Button>;
}
```

--------------------------------

### Install Inter Font with Fontsource via npm, pnpm, or yarn

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/joy/getting-started/installation/installation.md

Adds the Inter font to your project using the Fontsource package manager, allowing for easy integration and customization of font weights and styles.

```bash
npm install @fontsource/inter
```

```bash
pnpm add @fontsource/inter
```

```bash
yarn add @fontsource/inter
```

--------------------------------

### Import Button and Link for User Actions (React)

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/joy/getting-started/tutorial/tutorial.md

Shows how to integrate Button and Link components from Material-UI's Joy UI to replace native HTML button and anchor tags. It involves importing Button and Link, and optionally Typography for text with appended links. The example includes styling for margin and alignment.

```jsx
import Button from '@mui/joy/Button';
import Link from '@mui/joy/Link';
import Typography from '@mui/joy/Typography';

// ... inside your component

<Button sx={{ mt: 1 }}>
  Log in
</Button>
<Typography
  endDecorator={<Link href="/sign-up">Sign up</Link>}
  fontSize="sm"
  sx={{ alignSelf: 'center' }}
>
  Don't have an account?
</Typography>
```

--------------------------------

### Basic Spacing Example

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/system/spacing/spacing.md

Provides fundamental examples of applying padding and margin using the Material-UI spacing utility classes. Shows basic application of `p` (padding) and `m` (margin) props with different values.

```jsx
<Box sx={{ p: 1 }}>…
<Box sx={{ m: 1 }}>…
<Box sx={{ p: 2 }}>…
```

--------------------------------

### Company Registration Stepper Example in React

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/joy/components/stepper/stepper.md

A practical example demonstrating a Stepper component used for a company registration workflow. This showcases a common use case for the Stepper component in guiding users through a multi-step process.

```jsx
import Stepper from '@mui/joy/Stepper';
import Step from '@mui/joy/Step';
import StepIndicator from '@mui/joy/StepIndicator';
import Button from '@mui/joy/Button';
```

--------------------------------

### Basic Table Example - Material UI

Source: https://github.com/bichu1010/material-ui/blob/master/docs/data/material/components/table/table.md

A fundamental example demonstrating the basic structure and usage of the Material UI Table component without additional styling or complex features. It serves as a starting point for creating simple tables.

```jsx
import * as React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';

function createData(name, calories, fat, carbs, protein) {
  return {
    name,
    calories,
    fat,
    carbs,
    protein
  };
}

const rows = [
  createData('Frozen yoghurt', 159, 6, 24, 4),
  createData('Ice cream sandwich', 237, 9, 37, 4.3),
  createData('Eclair', 262, 16, 24, 6),
  createData('Cupcake', 305, 3, 67, 4.3),
  createData('Gingerbread', 356, 16, 49, 3.9),
];

export default function BasicTable() {
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow
              key={row.name}
              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
            >
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}
```