Best of JS • Refine

Home Page | Documentation | Examples | Discord | Blog

The sweet spot between the low/no code and “starting from scratch” for CRUD-heavy applications.
Refine is as an open source, React meta-framework for enterprise. It provides a headless solution for everything from admin panels to dashboards and internal tools.

What is Refine?

Refine is a React meta-framework for CRUD-heavy web applications. It addresses a wide range of enterprise use cases including internal tools, admin panels, dashboards and B2B apps.

Refine's core hooks and components streamline the development process by offering industry-standard solutions for crucial aspects of a project, including authentication, access control, routing, networking, state management, and i18n.

Refine's headless architecture enables the building of highly customizable applications by decoupling business logic from UI and routing. This allows integration with:

Any custom designs or UI frameworks like TailwindCSS, along with built-in support for Ant Design, Material UI, Mantine, and Chakra UI.
Various platforms, including Next.js, Remix, React Native, Electron, etc., by a simple routing interface without the need for additional setup steps.

⚡ Try Refine

Start a new project with Refine in seconds using the following command:

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 + Material UI:

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

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={
              <ThemedLayoutV2>
                <Outlet />
              </ThemedLayoutV2>
            }
          >
            <Route path="/products">
              <Route index element={<ProductList />} />
            </Route>
          </Route>
        </Routes>
      </Refine>
    </BrowserRouter>
  );
}

// src/pages/products/list.tsx

import { List, useDataGrid, DateField } from "@refinedev/mui";
import { DataGrid, GridColDef } from "@mui/x-data-grid";

export const ProductList = () => {
  const { dataGridProps } = useDataGrid();

  const { data: categories, isLoading } = useMany({
    resource: "categories",
    ids:
      dataGridProps?.rows?.map((item) => item?.category?.id).filter(Boolean) ??
      [],
    queryOptions: {
      enabled: !!dataGridProps?.rows,
    },
  });

  const columns = React.useMemo<GridColDef[]>(
    () => [
      { field: "id", headerName: "ID", type: "number" },
      { field: "name", flex: 1, headerName: "Name" },
      {
        field: "category",
        flex: 1,
        headerName: "Category",
        renderCell: ({ value }) =>
          isLoading
            ? "Loading..."
            : categories?.data?.find((item) => item.id === value?.id)?.title,
      },
      {
        field: "createdAt",
        flex: 1,
        headerName: "Created at",
        renderCell: ({ value }) => <DateField value={value} />,
      },
    ],
    [categories?.data, isLoading],
  );

  return (
    <List>
      <DataGrid {...dataGridProps} columns={columns} autoHeight />
    </List>
  );
};

The result will look like this:

Use cases

Refine shines on data-intensive⚡ enterprise B2B applications like admin panels, dashboards and internal tools. Thanks to the built-in SSR support, it can also power customer-facing applications like storefronts.

You can take a look at some live examples that can be built using Refine from scratch:

Key Features

Refine Devtools - dive deeper into your app and provide useful insights
Connectors for 15+ backend services including REST API, GraphQL, NestJs CRUD, Airtable, Strapi, Strapi v4, Supabase, Hasura, Appwrite, Nestjs-Query, Firebase, Sanity, and Directus.
SSR support with Next.js & Remix and Advanced routing with any router library of your choice
Auto-generation of CRUD UIs based on your API data structure
Perfect state management & mutations with React Query
Providers for seamless authentication and access control flows
Out-of-the-box support for live / real-time applications
Easy audit logs & document versioning

Learning Refine

Navigate to the Tutorial on building comprehensive CRUD application guides you through each step of the process.
Visit the Guides & Concepts to get informed about the fundamental concepts.
Read more on Advanced Tutorials for different usage scenarios.

Contribution

Refer to the contribution docs for more information.

If you have any doubts related to the project or want to discuss something, then join our Discord server.

Contributors ♥️ Thanks

We extend our gratitude to all our numerous contributors who create plugins, assist with issues and pull requests, and respond to questions on Discord and GitHub Discussions.

Refine is a community-driven project, and your contributions continually improve it.

License

import React from "react"; import { Refine, useMany } from "@refinedev/core"; import { ThemedLayoutV2 } from "@refinedev/mui"; import dataProvider from "@refinedev/simple-rest"; import routerProvider from "@refinedev/react-router-v6"; import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom"; 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={ <ThemedLayoutV2> <Outlet /> </ThemedLayoutV2> } > <Route path="/products"> <Route index element={<ProductList />} /> </Route> </Route> </Routes> </Refine> </BrowserRouter> ); } // src/pages/products/list.tsx import { List, useDataGrid, DateField } from "@refinedev/mui"; import { DataGrid, GridColDef } from "@mui/x-data-grid"; export const ProductList = () => { const { dataGridProps } = useDataGrid(); const { data: categories, isLoading } = useMany({ resource: "categories", ids: dataGridProps?.rows?.map((item) => item?.category?.id).filter(Boolean) ?? [], queryOptions: { enabled: !!dataGridProps?.rows, }, }); const columns = React.useMemo<GridColDef[]>( () => [ { field: "id", headerName: "ID", type: "number" }, { field: "name", flex: 1, headerName: "Name" }, { field: "category", flex: 1, headerName: "Category", renderCell: ({ value }) => isLoading ? "Loading..." : categories?.data?.find((item) => item.id === value?.id)?.title, }, { field: "createdAt", flex: 1, headerName: "Created at", renderCell: ({ value }) => <DateField value={value} />, }, ], [categories?.data, isLoading], ); return ( <List> <DataGrid {...dataGridProps} columns={columns} autoHeight /> </List> ); };