README

Home Page |
    Documentation |
    Examples |
    Discord |
    Blog |
    Refine






The sweet spot between the low/no code and “starting from scratch” for CRUD-heavy applications.

Refine Core is an open source, React meta-framework for enterprise. It provides a headless solution for everything from admin panels to
dashboards and internal tools.


Refine CORE also powers Refine's purpose built AI agent.




















 What is Refine CORE?

Refine CORE 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 CORE's 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 CORE'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 CORE

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

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


Or you can create a new project on your browser:


  




You can also try Refine's AI agent for free to create projects:


  


 Quick Start

Here's Refine CORE in action, the below code is an example of a simple CRUD application using Refine CORE + React Router + Material UI:

tsx
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 (
    
      
      
        
          
                
              
            }
          
            
              } /
            
          
        
      
    
  );
}

// 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(
    () = [
      { field: "id", headerName: "ID", type: "number" },
      { field: "name", flex: 1, headerName: "Name" },
      {
      

Top issues

Discussions

Latest release

Patch Changes

-   7372 59c6470ca0ecff0588f749ef4530312e7537bfdd Thanks @alicanerdurmaz! - fix(core): preserve custom getList response fields in useList and useTable results.

    We had an edge case where custom fields returned from getList were available on query.data but dropped from result. Now those extra fields are preserved in both useList and useTable.