# Example projects

### Integrations <a href="#integrations" id="integrations"></a>

The following integration examples are available in the [`/examples`](https://github.com/mui/material-ui/tree/master/examples) folder of the Material UI GitHub repository. These examples feature Material UI paired with other popular React libraries and frameworks, so you can skip the initial setup steps and jump straight into building.

Not sure which to pick? We recommend Next.js for server-side rendering, or Vite if you're looking to build a SPA. See [Start a New React Project](https://react.dev/learn/start-a-new-react-project) from the official React docs to learn more about the options available.

## Material UI - Next.js App Router example

This is a [Next.js](https://nextjs.org/) project bootstrapped using [`create-next-app`](https://github.com/vercel/next.js/tree/HEAD/packages/create-next-app) with Material UI installed.

### How to use

Download the example [or clone the repo](https://github.com/mui/material-ui):

```
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
```

Install it and run:

```
npm install
npm run dev
```

Open [http://localhost:3000](http://localhost:3000/) with your browser to see the result.

or:

[![Edit on StackBlitz](https://camo.githubusercontent.com/7f5709ecf7bd8016ce151719ee2ce57774399bd74ec3288c1a393ed1d951c8e4/68747470733a2f2f646576656c6f7065722e737461636b626c69747a2e636f6d2f696d672f6f70656e5f696e5f737461636b626c69747a2e737667)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs)

[![Edit on CodeSandbox](https://camo.githubusercontent.com/97cbe82b1619b42e1f78fce9db09104b932a9da1fd37751f4d9c41f4fe350241/68747470733a2f2f636f646573616e64626f782e696f2f7374617469632f696d672f706c61792d636f646573616e64626f782e737667)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-nextjs)

### Learn more

To learn more about this example:

* [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and API.
* [Customizing Material UI](https://mui.com/material-ui/customization/how-to-customize/) - approaches to customizing Material UI.

### What's next?

You now have a working example project. You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section.

{% @github-files/github-code-block url="<https://github.com/mui/material-ui.git>" %}