@refinedev/mui

Home Page | Discord | Examples | Blog | Documentation

refine is an open-source, headless React framework for developers building enterprise internal tools, admin panels, dashboards, B2B applications.

It eliminates repetitive tasks in CRUD operations and provides industry-standard solutions for critical project components like authentication, access control, routing, networking, state management, and i18n.

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 & Usage

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

import { ThemedLayoutV2 } from "@refinedev/mui";

import CssBaseline from "@mui/material/CssBaseline";
import GlobalStyles from "@mui/material/GlobalStyles";
import { ThemeProvider } from "@mui/material/styles";

const App = () => {
  return (
    <ThemeProvider>
      <CssBaseline />
      <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
      <Refine
      /* ... */
      >
        <ThemedLayoutV2>{/* ... */}</ThemedLayoutV2>
      </Refine>
    </ThemeProvider>
  );
};

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.