refine-dev

• Building admin panels, dashboards, or internal tools with React
• Need CRUD operations with various backends (REST, GraphQL, Supabase, Strapi, etc.)
• Want a headless approach with Mantine UI integration
• Setting up Vite-based React projects with data management
• Implementing authentication flows in React admin apps

Refine is built around these key abstractions:

1. Data Provider — adapter for your backend (REST, GraphQL, etc.)
2. Resources — entities in your app (e.g., posts, users, products)
3. Hooks — useList, useOne, useCreate, useUpdate, useDelete, useForm, useTable
4. Auth Provider — handles login, logout, permissions
5. Router Provider — integrates with React Router, etc.

```bash

npm create refine-app@latest

# Select: Vite, Mantine, REST API (or your backend)

```

Or manual setup:

```bash

npm install @refinedev/core @refinedev/mantine @refinedev/react-router @mantine/core @mantine/hooks @mantine/form @mantine/notifications

```

```tsx

// src/App.tsx

import { Refine } from "@refinedev/core";

import { MantineProvider } from "@mantine/core";

import routerProvider from "@refinedev/react-router";

import dataProvider from "@refinedev/simple-rest";

import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {

return (

dataProvider={dataProvider("https://api.example.com")}

routerProvider={routerProvider}

resources={[

{

name: "posts",

list: "/posts",

create: "/posts/create",

edit: "/posts/edit/:id",

show: "/posts/show/:id",

},

]}

>

{/ Your routes here /}

);

}

```

• Do NOT mix multiple UI libraries (pick Mantine and stick with it)
• Do NOT bypass data provider — always use Refine hooks for data operations
• Do NOT hardcode API URLs — use data provider configuration
• Do NOT skip resource definition — all CRUD entities must be declared in resources
• Do NOT ignore TypeScript types — Refine is fully typed, leverage it

1. Define the resource in
2. Create page components (List, Create, Edit, Show)
3. Set up routes matching resource paths
4. Use appropriate hooks (useTable for lists, useForm for create/edit)
5. Configure auth provider if authentication is needed

• [ ] Resource defined in Refine configuration
• [ ] All CRUD pages implemented with proper hooks
• [ ] Routes match resource configuration
• [ ] TypeScript types for resource data defined
• [ ] Error handling in place
• [ ] Loading states handled

Core

• [data-providers.md](references/data-providers.md) — Data provider interface, available providers, custom implementation
• [resources.md](references/resources.md) — Resource definition and configuration
• [routing.md](references/routing.md) — React Router integration and route patterns

Hooks

• [hooks.md](references/hooks.md) — All hooks: useList, useOne, useCreate, useUpdate, useDelete, useForm, useTable, useSelect

Security & Auth

• [auth.md](references/auth.md) — Auth provider, access control, RBAC/ABAC, Casbin/CASL integration

UI & Components

• [mantine-ui.md](references/mantine-ui.md) — Mantine components integration
• [inferencer.md](references/inferencer.md) — Auto-generate CRUD pages from API schema

Utilities & Features

• [notifications.md](references/notifications.md) — Notification provider and useNotification hook
• [i18n.md](references/i18n.md) — Internationalization with i18nProvider
• [realtime.md](references/realtime.md) — LiveProvider for websocket/realtime subscriptions

• Official docs: https://refine.dev/docs/
• GitHub: https://github.com/refinedev/refine
• Mantine integration: https://refine.dev/docs/ui-integrations/mantine/