Version: 4.xx.xx
Theme
http://localhost:3000import { List, Create, Edit, EditButton, useForm } from "@refinedev/mantine";
import { Table, Pagination, TextInput } from "@mantine/core";
import { useTable } from "@refinedev/react-table";
import { ColumnDef, flexRender } from "@tanstack/react-table";
const PostList: React.FC = () => {
const columns = React.useMemo<ColumnDef<IPost>[]>(
() => [
{
id: "id",
header: "ID",
accessorKey: "id",
},
{
id: "title",
header: "Title",
accessorKey: "title",
},
{
id: "actions",
header: "Actions",
accessorKey: "id",
cell: function render({ getValue }) {
return (
<EditButton
hideText
recordItemId={getValue() as number}
/>
);
},
},
],
[],
);
const {
getHeaderGroups,
getRowModel,
refineCore: { setCurrent, pageCount, current },
} = useTable({
columns,
refineCoreProps: {
initialPageSize: 5,
},
});
return (
<List>
<Table>
<thead>
{getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{getRowModel().rows.map((row) => (
<tr key={row.id}>
{row.getVisibleCells().map((cell) => (
<td key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</td>
))}
</tr>
))}
</tbody>
</Table>
<br />
<Pagination
position="right"
total={pageCount}
page={current}
onChange={setCurrent}
/>
</List>
);
};
const PostEdit: React.FC = () => {
const { saveButtonProps, getInputProps } = useForm({
initialValues: {
title: "",
},
validate: {
title: (value) => (value.length < 2 ? "Too short title" : null),
},
});
return (
<Edit saveButtonProps={saveButtonProps}>
<form>
<TextInput
mt={8}
label="Title"
placeholder="Title"
{...getInputProps("title")}
/>
</form>
</Edit>
);
};
const PostCreate: React.FC = () => {
const { saveButtonProps, getInputProps } = useForm({
initialValues: {
title: "",
},
validate: {
title: (value) => (value.length < 2 ? "Too short title" : null),
},
});
return (
<Create saveButtonProps={saveButtonProps}>
<form>
<TextInput
mt={8}
label="Title"
placeholder="Title"
{...getInputProps("title")}
/>
</form>
</Create>
);
};
interface IPost {
id: number;
title: string;
}
Mantine theme is an object where your application's colors, fonts, spacing, border-radius and other design tokens are stored. You can either create your own theme object or use themes that provide from refine. Theme provides a way to your app's design to meet them.
Refer to the Mantine documentation for more information about theme object. →
Predefined Themes
RefineThemes has predefined themes for you. You can use them by importing them from @refinedev/mantine package. It is not required if you decide to use the default Mantine theme.
const { Blue, Purple, Magenta, Red, Orange, Yellow } = RefineThemes;
import { Refine } from "@refinedev/core";
import { ThemedLayout, RefineThemes } from "@refinedev/mantine";
import { MantineProvider } from "@mantine/core";
const App: React.FC = () => {
return (
<MantineProvider theme={RefineThemes.Blue}>
<Refine
/* ... */
>
<ThemedLayout>{/* ... */}</ThemedLayout>
</Refine>
</MantineProvider>
);
};
Theme customization
<MantineProvider/> component can be used to change the theme. It is not required if you decide to use the default theme. You can also use RefineThemes provided by refine.
http://localhost:3000import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import {
ThemedLayout,
notificationProvider,
ErrorComponent,
RefineThemes,
} from "@refinedev/mantine";
import { MantineProvider, Global } from "@mantine/core";
import { NotificationsProvider } from "@mantine/notifications";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
import { PostCreate, PostEdit, PostList } from "./pages";
const App = () => {
return (
<MantineProvider
theme={RefineThemes.Blue}
withNormalizeCSS
withGlobalStyles
>
<Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
<NotificationsProvider position="top-right">
<BrowserRouter>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(
"https://api.fake-rest.refine.dev",
)}
notificationProvider={notificationProvider}
resources={[
{
name: "posts",
list: "/posts",
edit: "/posts/edit/:id",
create: "/posts/create",
},
]}
>
<Routes>
<Route
element={
<ThemedLayout>
<Outlet />
</ThemedLayout>
}
>
<Route path="posts">
<Route index element={<PostList />} />
<Route
path="create"
element={<PostCreate />}
/>
<Route
path="edit/:id"
element={<PostEdit />}
/>
</Route>
<Route path="*" element={<ErrorComponent />} />
</Route>
</Routes>
</Refine>
</BrowserRouter>
</NotificationsProvider>
</MantineProvider>
);
};
Refer to the <MantineProvider/> documentation for more information. →
Overriding the refine themes
You can override or extend the default refine themes. You can also create your own theme. Let's see how to do this.
http://localhost:3000import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import {
ThemedLayout,
notificationProvider,
ErrorComponent,
RefineThemes,
} from "@refinedev/mantine";
import { MantineProvider, Global } from "@mantine/core";
import { NotificationsProvider } from "@mantine/notifications";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
import { PostCreate, PostEdit, PostList } from "./pages";
const App = () => {
return (
<MantineProvider
theme={{
...RefineThemes.Blue,
colors: {
brand: [
"#ECF9F8",
"#C9EEEC",
"#A6E2E1",
"#84D7D5",
"#61CCC9",
"#3EC1BD",
"#329A97",
"#257471",
"#194D4B",
"#0C2726",
],
},
globalStyles: (theme: MantineTheme) => ({
body: {
backgroundColor: "#84D7D5",
},
}),
}}
withNormalizeCSS
withGlobalStyles
>
<Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
<NotificationsProvider position="top-right">
<BrowserRouter>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(
"https://api.fake-rest.refine.dev",
)}
notificationProvider={notificationProvider}
ThemedLayout={ThemedLayout}
resources={[
{
name: "posts",
list: "/posts",
edit: "/posts/edit/:id",
create: "/posts/create",
},
]}
>
<Routes>
<Route
element={
<ThemedLayout>
<Outlet />
</ThemedLayout>
}
>
<Route path="posts">
<Route index element={<PostList />} />
<Route
path="create"
element={<PostCreate />}
/>
<Route
path="edit/:id"
element={<PostEdit />}
/>
</Route>
<Route path="*" element={<ErrorComponent />} />
</Route>
</Routes>
</Refine>
</BrowserRouter>
</NotificationsProvider>
</MantineProvider>
);
};
Refer to the Mantine colors documentation for more information. →
Theme switching
You can switch between themes as Mantine mentioned in its documentation. You can see an example of using local storage to store the theme below.
http://localhost:3000import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import {
ThemedLayout,
ErrorComponent,
notificationProvider,
RefineThemes,
} from "@refinedev/mantine";
import { NotificationsProvider } from "@mantine/notifications";
import {
MantineProvider,
Global,
useMantineColorScheme,
Header as MantineHeader,
Group,
ActionIcon,
ColorScheme,
ColorSchemeProvider,
} from "@mantine/core";
import { useLocalStorage } from "@mantine/hooks";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
import { IconSun, IconMoonStars } from "@tabler/icons";
import { PostCreate, PostEdit, PostList } from "./pages";
const Header = () => {
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
const dark = colorScheme === "dark";
return (
<MantineHeader height={50} p="xs">
<Group position="right">
<ActionIcon
variant="outline"
color={dark ? "yellow" : "primary"}
onClick={() => toggleColorScheme()}
title="Toggle color scheme"
>
{dark ? <IconSun /> : <IconMoonStars />}
</ActionIcon>
</Group>
</MantineHeader>
);
};
const App = () => {
const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
key: "mantine-color-scheme",
defaultValue: "light",
getInitialValueInEffect: true,
});
const toggleColorScheme = (value?: ColorScheme) =>
setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"));
return (
<ColorSchemeProvider
colorScheme={colorScheme}
toggleColorScheme={toggleColorScheme}
>
<MantineProvider
theme={{
...RefineThemes.Blue,
colorScheme: colorScheme,
}}
withNormalizeCSS
withGlobalStyles
>
<Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
<NotificationsProvider position="top-right">
<BrowserRouter>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(
"https://api.fake-rest.refine.dev",
)}
notificationProvider={notificationProvider}
resources={[
{
name: "posts",
list: "/posts",
edit: "/posts/edit/:id",
create: "/posts/create",
},
]}
>
<Routes>
<Route
element={
<ThemedLayout
Header={Header}
>
<Outlet />
</ThemedLayout>
}
>
<Route path="posts">
<Route index element={<PostList />} />
<Route
path="create"
element={<PostCreate />}
/>
<Route
path="edit/:id"
element={<PostEdit />}
/>
</Route>
<Route
path="*"
element={<ErrorComponent />}
/>
</Route>
</Routes>
</Refine>
</BrowserRouter>
</NotificationsProvider>
</MantineProvider>
</ColorSchemeProvider>
);
};
Refer to the Mantine dark theme documentation for more information. →
tip
If you want to customize the default layout elements provided with @refinedev/mantine package, check out the Custom ThemedLayout tutorial.