# Material UI
`@lazarv/react-server` is compatible with [Material UI (MUI)](https://mui.com/material-ui/), a popular React component library implementing Google's Material Design. MUI uses Emotion for CSS-in-JS styling, which works out of the box with `@lazarv/react-server`.
## Installation
Install Material UI and its required dependencies:
```sh
pnpm add @mui/material @emotion/react @emotion/styled
```
Optionally, install the Roboto font and Material Icons:
```sh
pnpm add @fontsource/roboto @mui/icons-material
```
## Theme setup
Create a theme file to configure your Material UI theme:
```js filename="app/theme.mjs"
import { createTheme } from "@mui/material/styles";
const theme = createTheme({
palette: {
mode: "light",
},
typography: {
fontFamily: "Roboto",
},
});
export default theme;
```
## Provider setup
Material UI requires a `ThemeProvider` and `CssBaseline` for proper theming and baseline styles. Create a client component that wraps your app:
```jsx filename="app/components/Layout.jsx"
"use client";
import Container from "@mui/material/Container";
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles";
import theme from "../theme";
export default function Layout({ children }) {
return (
{children}
);
}
```
Then set up your root layout to import the font and use the `Layout` provider component:
```jsx filename="app/layout.jsx"
import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
import Layout from "./components/Layout";
export default function RootLayout({ children }) {
return (
My App
{children}
);
}
```
## Navigation
To use MUI link and button components with `@lazarv/react-server`'s client-side navigation, pass the runtime's `Link` component via the `component` prop:
```jsx filename="app/page.jsx"
"use client";
import { Link as ReactServerLink } from "@lazarv/react-server/navigation";
import Link from "@mui/material/Link";
export default function Home() {
return (
Go to the about page
);
}
```
The same pattern works with MUI `Button` for navigation:
```jsx filename="app/about/page.jsx"
"use client";
import { Link as ReactServerLink } from "@lazarv/react-server/navigation";
import Button from "@mui/material/Button";
export default function About() {
return (
);
}
```
## Server components
Some MUI components that don't rely on browser APIs or React hooks can be used directly in server components. Components like `Typography` and `Link` (without navigation) work in server components:
```jsx filename="app/components/Copyright.jsx"
import Typography from "@mui/material/Typography";
import Link from "@mui/material/Link";
export default function Copyright() {
return (
{"Copyright © "}
Your Website
{" "}
{new Date().getFullYear()}.
);
}
```
## Icons
When using `@mui/icons-material`, import icons from the ESM path for proper module resolution:
```jsx
import LightbulbOutlined from "@mui/icons-material/esm/LightbulbOutlined";
```
> Check out the [Material UI example](https://github.com/lazarv/react-server/tree/main/examples/mui) to see a complete example of using MUI with `@lazarv/react-server`.