Refine: React Meta-Framework for CRUD-Heavy Enterprise Applications

Installation and project creation via CLI or browser playground

Starting a new project uses the command from the README:

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

An alternative browser-based playground is available at https://refine.dev/core/?playground=true. The AI agent at https://refine.dev/ can also create projects for free. The quick start example shows a minimal CRUD application using Refine Core with React Router and Material UI:

import React from "react";
import { Refine, useMany } from "@refinedev/core";
import { ThemedLayout } from "@refinedev/mui";
import dataProvider from "@refinedev/simple-rest";
import routerProvider from "@refinedev/react-router";
import { BrowserRouter, Outlet, Route, Routes } from "react-router";

import CssBaseline from "@mui/material/CssBaseline";

export default function App() {
  return (
    <BrowserRouter>
      <CssBaseline />
      <Refine
        dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
        routerProvider={routerProvider}
        resources={[

The result preview is available at https://refine.new/preview/c85442a8-8df1-4101-a09a-47d3ca641798. The README does not document the CLI options available during project creation, such as UI framework selection, backend connector choice, routing library, or authentication provider.

Headless architecture decouples business logic from UI and routing

Refine's headless architecture enables building highly customizable applications by separating business logic from UI and routing. This allows integration with any custom designs or UI frameworks including TailwindCSS, along with built-in support for Ant Design, Material UI, Mantine, and Chakra UI. Various platforms including Next.js, Remix, React Native, and Electron are supported through a simple routing interface without additional setup steps. The core package @refinedev/core provides hooks and components for authentication, access control, routing, networking, state management, and i18n. This decoupling means you can swap UI libraries or routing solutions without rewriting business logic, but it also means you must understand the provider pattern Refine uses for each concern.

Monorepo managed with lerna and pnpm requires specific build commands

The repository uses a monorepo structure managed with lerna and pnpm. The root package.json is private with version 0.0.0. Build commands include `pnpm run build` which runs `lerna run build --scope @refinedev/core`, and `pnpm run build:all` which builds all packages including create-refine-app. The `pnpm run dev` command runs `lerna run dev` across packages. A `nuke` script removes all node_modules, builds, and lockfiles. The `coffee` script runs `pnpm nuke && pnpm i && pnpm build:all` for a full clean rebuild. Lerna configuration is in lerna.json and nx.json. The pnpm-workspace.yaml defines the workspace. Husky is installed via prepare script for git hooks. Biome is used for linting and formatting with commands like `pnpm run lint`, `pnpm run lint:fix`, and `pnpm run lint:ci`. The `attw` and `attw:all` scripts run API type checking via lerna. The `changeset` script manages versioning. The `cypress:open` and `cypress:run` scripts run end-to-end tests. The `dev:docs` command runs documentation and live previews concurrently. The `pnpm:devPreinstall` script fixes pnpm symlinks.

15+ backend connectors cover REST, GraphQL, and BaaS providers

Refine provides connectors for 15+ backend services. The README lists: REST API (simple-rest package), GraphQL (graphql package), NestJs CRUD (nestjsx-crud), Airtable, Strapi, Strapi v4, Supabase, Hasura, Appwrite, Nestjs-Query, Firebase, Sanity, and Directus. Each connector lives in its own package under the packages directory. The dataProvider prop on the Refine component accepts these connectors. For example, the quick start uses `@refinedev/simple-rest` with a fake REST API endpoint at https://api.fake-rest.refine.dev. The routerProvider uses `@refinedev/react-router`. The README does not document whether all connectors share a common interface or how to write custom data providers for unsupported backends. The GraphQL and REST connectors are the most generic; others are specific to their respective platforms. The packages directory also contains UI integrations for Ant Design, Material UI, Mantine, Chakra UI, and headless implementations.

Auto-generation of CRUD UIs from API data structure

Refine supports auto-generation of CRUD UIs based on your API data structure. This feature works with the data provider to infer resource shapes and generate list, create, edit, and show pages. The quick start example shows a resources array configuration passed to the Refine component. The devtools package (@refinedev/devtools) provides debugging insights into the application. The README mentions live/realtime application support out of the box and easy audit logs with document versioning. The SSR support with Next.js and Remix enables customer-facing applications like storefronts. The examples directory contains numerous templates including a CRM application, admin panel, Win95 style admin panel, PDF invoice generator, Medium clone, multitenancy with Strapi, and Next.js ecommerce store. The templates page at https://refine.dev/templates/ lists all live examples. The tutorial at https://refine.dev/core/tutorial/essentials/intro/ guides building a comprehensive CRUD application step by step.

Authentication and access control via provider pattern

Refine uses providers for authentication and access control flows. The authProvider handles login, logout, register, forgot password, and identity management. The accessControlProvider manages permissions and roles. The examples directory shows implementations for various providers: Auth0, Google login, Keycloak, Kinde, OTP, and headless auth. UI-specific auth examples exist for Ant Design, Mantine, Material UI, and Chakra UI. The routerProvider handles routing integration with react-router, Next.js, or Remix. The i18nProvider handles internationalization. The notificationProvider manages notifications. The auditLogProvider tracks changes. Each provider follows a specific interface that Refine expects. The README does not document the exact interface signatures or whether TypeScript types enforce them. The live/realtime support suggests WebSocket or Server-Sent Events integration for real-time updates but the specific implementation is not detailed in the README.

State management built on React Query with mutation support

Refine uses React Query (TanStack Query) for state management and mutations. The README describes this as perfect state management and mutations with React Query. The useMany hook is imported from @refinedev/core in the quick start example. The dataProvider integrates with React Query for caching, invalidation, and optimistic updates. The README does not document whether Refine exposes React Query's hooks directly or wraps them, how to configure React Query's cache time, stale time, or retry behavior through Refine, or whether React Query devtools integration works alongside Refine's own devtools. The live/realtime support suggests WebSocket or Server-Sent Events integration but the specific implementation is not detailed in the README. The auto-generation of CRUD UIs leverages React Query's cache for list, create, edit, and show operations. The devtools package provides debugging insights into queries and mutations.

Editorial conclusion

Teams building data-intensive internal tools, admin panels, or B2B dashboards with React will benefit from Refine's backend connectors and headless architecture. Projects needing a simple CRUD library without provider overhead or teams unfamiliar with React Query patterns should evaluate the learning curve first.

Frequently asked questions

Official sources

1. Official documentation
2. Official README
3. Project repository
4. Release notes