Loading repository data…
refinedev / repository
A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
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.
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.
Start a new project with Refine CORE in seconds using the following command:
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:
Here's Refine CORE in action, the below code is an example of a simple CRUD application using Refine CORE + React Router + 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={[
{
name: "products",
list: "/products",
},
]}
>
<Routes>
<Route
element={
<ThemedLayout>
<Outlet />
</ThemedLayout>
}
>
<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",
display: "flex",
renderCell: ({ value }) =>
isLoading
? "Loading..."
: categories?.data?.find((item) => item.id === value?.id)?.title,
},
{
field: "createdAt",
flex: 1,
headerName: "Created at",
display: "flex",
renderCell: ({ value }) => <DateField value={value} />,
},
],
[categories?.data, isLoading],
);
return (
<List>
<DataGrid {...dataGridProps} columns={columns} />
</List>
);
};
The result will look like this:
Refine CORE 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 CORE from scratch:
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.
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 CORE is a community-driven project, and your contributions continually improve it.
Licensed under the MIT License, Copyright © 2021-present Refinedev
Selected from shared topics, language and repository description—not editorial ratings.
marmelab /
A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design