Home Page |
Discord |
Examples |
Blog |
Documentation
[](https://discord.gg/refine)
[](https://twitter.com/refine_dev)
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**.
# Mantine UI integration for Refine
[Mantine](https://mantine.dev/) is a React components library focused on providing great user and developer experience.
[Refine](https://refine.dev/) is **headless by design**, offering unlimited styling and customization options. Moreover, Refine ships with ready-made integrations for [Ant Design](https://ant.design/), [Material UI](https://mui.com/material-ui/getting-started/overview/), [Mantine](https://mantine.dev/), and [Chakra UI](https://chakra-ui.com/) for convenience.
Refine has connectors for 15+ backend services, including REST API, [GraphQL](https://graphql.org/), and popular services like [Airtable](https://www.airtable.com/), [Strapi](https://strapi.io/), [Supabase](https://supabase.com/), [Firebase](https://firebase.google.com/), and [NestJS](https://nestjs.com/).
## Installation
To use Refine with Mantine, you need to install the following package `@refinedev/mantine` along with the Mantine packages:
```sh
npm install @refinedev/mantine @refinedev/react-table @mantine/core@5 @mantine/hooks@5 @mantine/form@5 @mantine/notifications@5 @emotion/react @tabler/icons
```
## ⚡ Try Refine
Start a new project with Refine in seconds using the following command:
```sh
npm 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 + Mantine:
```tsx
import React from "react";
import { Refine } from "@refinedev/core";
import {
ErrorComponent,
ThemedLayoutV2,
useNotificationProvider,
RefineThemes,
} from "@refinedev/mantine";
import dataProvider from "@refinedev/simple-rest";
import RouterProvider from "@refinedev/react-router";
import { BrowserRouter, Outlet, Route, Routes } from "react-router";
import { NotificationsProvider } from "@mantine/notifications";
import { MantineProvider, Global } from "@mantine/core";
import { ProductList } from "./pages/products/list";
export default function App() {
return (
{" "}
}
>
} />
} />
);
}
// src/pages/products/list.tsx
import React from "react";
import { type GetManyResponse, useMany } from "@refinedev/core";
import { List } from "@refinedev/mantine";
import { useTable } from "@refinedev/react-table";
import { type ColumnDef, flexRender } from "@tanstack/react-table";
import { Box, Group, ScrollArea, Table, Pagination } from "@mantine/core";
export const ProductList = () => {
const columns = React.useMemo[]>(
() => [
{
id: "id",
header: "ID",
accessorKey: "id",
},
{
id: "name",
header: "Name",
accessorKey: "name",
},
{
id: "category",
header: "Category",
accessorKey: "category",
cell: function render({ getValue, table }) {
const meta = table.options.meta as TableMeta;
const loading = meta.loading;
const categoriesData = meta.categoriesData;
const category = categoriesData?.data.find(
(item) => item?.id === getValue()?.id,
);
if (loading) {
return "Loading...";
}
return category?.title ?? "-";
},
},
],
[],
);
const {
getHeaderGroups,
getRowModel,
setOptions,
refineCore: {
setCurrentPage,
pageCount,
currentPage,
result,
tableQuery: { isLoading: tableIsLoading },
},
} = useTable({
columns,
meta: {
categoriesData: [],
loading: true,
},
refineCoreProps: {
sorters: {
initial: [
{
field: "id",
order: "desc",
},
],
},
},
});
const categoryIds = result?.data?.map((item) => item.category?.id) ?? [];
const {
result: categoriesData,
query: { isLoading: categoriesIsLoading },
} = useMany({
resource: "categories",
ids: categoryIds,
queryOptions: {
enabled: categoryIds.length > 0,
},
});
const loading = tableIsLoading || categoriesIsLoading;
setOptions((prev) => ({
...prev,
meta: {
...prev.meta,
loading,
categoriesData,
},
}));
return (
{getHeaderGroups().map((headerGroup) => (
{headerGroup.headers.map((header) => {
return (
|
{!header.isPlaceholder && (
{flexRender(
header.column.columnDef.header,
header.getContext(),
)}
)}
|
);
})}
))}
{getRowModel().rows.map((row) => {
return (
{row.getVisibleCells().map((cell) => {
return (
|
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
|
);
})}
);
})}
);
};
type TableMeta = {
loading: boolean;
categoriesData: GetManyResponse;
};
type ICategory = {
id: number;
title: string;
};
type IPost = {
id: number;
title: string;
content: string;
status: "published" | "draft" | "rejected";
category: { id: number };
};
```
The result will look like this:
[](https://github.com/refinedev/refine/tree/master/examples/base-mantine)
## Documentation
- For more detailed information and usage, refer to the [Refine Mantine documentation](https://refine.dev/docs/ui-integrations/mantine/introduction).
- [Refer to documentation for more info about Refine](https://refine.dev/docs).
- [Step up to Refine tutorial](https://refine.dev/tutorial).
