Refine

// Overview

Refine is an open-source React meta-framework for CRUD-heavy web applications. It targets enterprise use cases such as internal tools, admin panels, dashboards, and B2B apps, where most screens follow create-read-update-delete patterns over data records.

Its hooks and components handle the parts of a project that are usually repetitive: authentication, access control, routing, networking, state management, and i18n. The architecture is headless, which means business logic is separated from the UI. You can wire it to your own design or to built-in support for Ant Design, Material UI, Mantine, Chakra UI, or TailwindCSS.

In the low-code category, Refine sits between a full hand-coded React app and a closed no-code builder. A CLI scaffolds projects and resources for you, but the output stays as standard React code you fully own and can extend.

// What it does

• Headless core that decouples business logic from UI and routing, so you can use any design system or framework
• Built-in support for Ant Design, Material UI, Mantine, and Chakra UI, plus custom UIs via TailwindCSS
• Connectors for 15+ backend services including REST API, GraphQL, NestJS CRUD, Airtable, Strapi, and Supabase
• Ready-made handling for authentication, access control, routing, networking, state management, and i18n
• Works across platforms like Next.js, Remix, React Native, and Electron through a simple routing interface
• Server-side rendering support, so it can also power customer-facing apps like storefronts

// Getting started

Refine projects are scaffolded with a single command, then you define resources and data providers inside the <Refine> component.

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

import React from "react";
import { Refine } 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={[{ name: "products", list: "/products" }]}
      >
        <Routes>
          <Route
            element={
              <ThemedLayout>
                <Outlet />
              </ThemedLayout>
            }
          >
            <Route path="/products">
              <Route index element={<ProductList />} />
            </Route>
          </Route>
        </Routes>
      </Refine>
    </BrowserRouter>
  );
}

Commands and code are distilled from the project's own documentation — always check the official repo for the latest.

// When to use it

• Building an internal admin panel or back-office tool over an existing REST or GraphQL API
• Creating data-heavy B2B dashboards where most screens are CRUD over records
• Standing up a CRM, invoice generator, or multitenant app on top of a backend like Strapi or Supabase
• Shipping a customer-facing storefront that needs server-side rendering alongside admin screens

// How Refine compares

Refine alongside other open-source low-code & no-code builders tools AI/TLDR tracks, ranked by GitHub stars.