Integrations →Edit this page.md

Mantine UI

@lazarv/react-server is compatible with Mantine, a full-featured React component library. You can use Mantine components in your client components with server-side rendering support, PostCSS configuration for Mantine's styling system, and the MantineProvider for theming.

Install Mantine and its required PostCSS dependencies:

pnpm add @mantine/core @mantine/hooks
pnpm add -D postcss postcss-preset-mantine postcss-simple-vars

Mantine requires a PostCSS configuration with the postcss-preset-mantine plugin and breakpoint variables:

postcss.config.cjs
module.exports = {
  plugins: {
    "postcss-preset-mantine": {},
    "postcss-simple-vars": {
      variables: {
        "mantine-breakpoint-xs": "36em",
        "mantine-breakpoint-sm": "48em",
        "mantine-breakpoint-md": "62em",
        "mantine-breakpoint-lg": "75em",
        "mantine-breakpoint-xl": "88em",
      },
    },
  },
};

Import the core Mantine styles and wrap your app with MantineProvider in your root layout. Include the ColorSchemeScript in the <head> to prevent a flash of unstyled content:

src/pages/layout.tsx
import "@mantine/core/styles.css";

import { ColorSchemeScript, createTheme, MantineProvider } from "@mantine/core";

const theme = createTheme({
  /** Put your mantine theme override here */
});

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-mantine-color-scheme="light" suppressHydrationWarning>
      <head>
        <ColorSchemeScript />
      </head>
      <body suppressHydrationWarning>
        <MantineProvider theme={theme}>
          {children}
        </MantineProvider>
      </body>
    </html>
  );
}

Mantine components that use React hooks or browser APIs must be used in client components. Create a client component and import the Mantine components you need:

src/components/Counter.tsx
"use client";

import { useState } from "react";
import { Button, Group, Text } from "@mantine/core";

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <Group>
      <Button onClick={() => setCount((c) => c - 1)}>-</Button>
      <Text>{count}</Text>
      <Button onClick={() => setCount((c) => c + 1)}>+</Button>
    </Group>
  );
}

Then use the client component from your server component page:

src/pages/index.tsx
import { Counter } from "../components/Counter";

export default function HomePage() {
  return <Counter />;
}

To use Mantine's navigation components like NavLink with @lazarv/react-server's client-side navigation, pass the runtime's Link component via the component prop:

src/components/MainNavigation.tsx
"use client";

import { NavLink } from "@mantine/core";
import { Link, usePathname } from "@lazarv/react-server/navigation";

export function MainNavigation() {
  const pathname = usePathname();

  return (
    <>
      <NavLink
        component={Link}
        to="/"
        label="Home"
        active={pathname === "/"}
      />
      <NavLink
        component={Link}
        to="/about"
        label="About"
        active={pathname === "/about"}
      />
    </>
  );
}

Mantine offers many extension packages for additional functionality. Import their styles in the pages or layouts where they are used:

src/pages/dates.tsx
import "@mantine/dates/styles.css";

import { MyDates } from "../components/MyDates";

export default function DatesPage() {
  return <MyDates />;
}

Some commonly used Mantine extensions and their style imports:

PackageStyle import
@mantine/dates@mantine/dates/styles.css
@mantine/charts@mantine/charts/styles.css
@mantine/notifications@mantine/notifications/styles.css
@mantine/code-highlight@mantine/code-highlight/styles.css
@mantine/carousel@mantine/carousel/styles.css
@mantine/spotlight@mantine/spotlight/styles.css
@mantine/nprogress@mantine/nprogress/styles.css
@mantine/tiptap@mantine/tiptap/styles.css
@mantine/dropzone@mantine/dropzone/styles.css

Some components (like charts that depend on browser APIs) cannot be server-side rendered. Use ClientOnly from @lazarv/react-server/client to render them only on the client:

src/pages/charts.tsx
import "@mantine/charts/styles.css";

import { ClientOnly } from "@lazarv/react-server/client";
import { MyAreaChart } from "../components/MyAreaChart";

export default function ChartsPage() {
  return (
    <ClientOnly>
      <MyAreaChart />
    </ClientOnly>
  );
}

Check out the Mantine example to see a complete example of using Mantine UI with @lazarv/react-server.

← Integrations: TanStack QueryIntegrations: Material UI →