Material UI integration for Refine

Material UI is a library of React UI components that implements Google's Material Design.

Refine is headless by design, offering unlimited styling and customization options. Moreover, Refine ships with ready-made integrations for Ant Design, Material UI, Mantine, and Chakra UI for convenience.

Refine has connectors for 15+ backend services, including REST API, GraphQL, and popular services like Airtable, Strapi, Supabase, Firebase, and NestJS.

Installation

To use Refine with Material UI, you need to install the following package @refinedev/mui along with the Material UI packages:

1npm install @refinedev/mui @mui/material @mui/lab @mui/x-data-grid @emotion/react @emotion/styled

⚡ Try Refine

Start a new project with Refine in seconds using the following command:

1npm create refine-app@latest my-refine-app

Or you can create a new project on your browser:

Quick Start

Here's Refine in action, the below code is an example of a simple CRUD application using Refine + React Router + Material UI:

1import React from "react";
2import { Refine, useMany } from "@refinedev/core";
3import { ThemedLayoutV2 } from "@refinedev/mui";
4import dataProvider from "@refinedev/simple-rest";
5import routerBindings from "@refinedev/react-router";
6import { BrowserRouter, Outlet, Route, Routes } from "react-router";
7
8import CssBaseline from "@mui/material/CssBaseline";
9
10export default function App() {
11  return (
12    <BrowserRouter>
13      <CssBaseline />
14      <Refine
15        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
16        routerProvider={routerBindings}
17        resources={[
18          {
19            name: "products",
20            list: "/products",
21          },
22        ]}
23      >
24        <Routes>
25          <Route
26            element={
27              <ThemedLayoutV2>
28                <Outlet />
29              </ThemedLayoutV2>
30            }
31          >
32            <Route path="/products">
33              <Route index element={<ProductList />} />
34            </Route>
35          </Route>
36        </Routes>
37      </Refine>
38    </BrowserRouter>
39  );
40}
41
42// src/pages/products/list.tsx
43
44import { List, useDataGrid, DateField } from "@refinedev/mui";
45import { DataGrid, GridColDef } from "@mui/x-data-grid";
46
47export const ProductList = () => {
48  const { dataGridProps } = useDataGrid();
49
50  const { data: categories, isLoading } = useMany({
51    resource: "categories",
52    ids:
53      dataGridProps?.rows?.map((item) => item?.category?.id).filter(Boolean) ??
54      [],
55    queryOptions: {
56      enabled: !!dataGridProps?.rows,
57    },
58  });
59
60  const columns = React.useMemo<GridColDef[]>(
61    () => [
62      { field: "id", headerName: "ID", type: "number" },
63      { field: "name", flex: 1, headerName: "Name" },
64      {
65        field: "category",
66        flex: 1,
67        headerName: "Category",
68        display: "flex",
69        renderCell: ({ value }) =>
70          isLoading
71            ? "Loading..."
72            : categories?.data?.find((item) => item.id === value?.id)?.title,
73      },
74      {
75        field: "createdAt",
76        flex: 1,
77        headerName: "Created at",
78        display: "flex",
79        renderCell: ({ value }) => <DateField value={value} />,
80      },
81    ],
82    [categories?.data, isLoading],
83  );
84
85  return (
86    <List>
87      <DataGrid {...dataGridProps} columns={columns} />
88    </List>
89  );
90};

The result will look like this:

Documentation

• For more detailed information and usage, refer to the Refine Material UI documentation.
• Refer to complete Refine tutorial with Material UI.
• Refer to documentation for more info about Refine.