Gathering detailed insights and metrics for @refinedev/core
Gathering detailed insights and metrics for @refinedev/core
Gathering detailed insights and metrics for @refinedev/core
Gathering detailed insights and metrics for @refinedev/core
A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
npm install @refinedev/core
Typescript
Module System
Node Version
NPM Version
@refinedev/antd@5.46.2
Updated on Jul 07, 2025
@refinedev/core@4.57.10
Updated on Jul 07, 2025
@refinedev/mui@6.2.2
Updated on Jul 07, 2025
@refinedev/react-hook-form@4.10.2
Updated on Jul 07, 2025
@refinedev/mantine@2.36.2
Updated on Jul 07, 2025
@refinedev/mui@6.2.1
Updated on Jun 13, 2025
TypeScript (97.68%)
JavaScript (2.03%)
CSS (0.16%)
HTML (0.08%)
Handlebars (0.05%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
31,612 Stars
6,964 Commits
2,583 Forks
139 Watchers
37 Branches
293 Contributors
Updated on Jul 15, 2025
Latest Version
4.57.10
Package Id
@refinedev/core@4.57.10
Unpacked Size
3.85 MB
Size
780.16 kB
File Count
1,536
NPM Version
10.8.2
Node Version
18.20.8
Published on
Jul 07, 2025
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
9
5
22
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.
Refine also now powers Refine AI, our purpose built AI Agent.
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.
Start a new project with Refine in seconds using the following command:
1npm create refine-app@latest my-refine-app
Or you can create a new project on your browser:
You can also try Refine AI for free to create projects:
Here's Refine in action, the below code is an example of a simple CRUD application using Refine + React Router + Material UI:
1import React from "react"; 2import { Refine, useMany } from "@refinedev/core"; 3import { ThemedLayoutV2 } from "@refinedev/mui"; 4import dataProvider from "@refinedev/simple-rest"; 5import routerProvider from "@refinedev/react-router"; 6import { BrowserRouter, Outlet, Route, Routes } from "react-router"; 7 8import CssBaseline from "@mui/material/CssBaseline"; 9 10export default function App() { 11 return ( 12 <BrowserRouter> 13 <CssBaseline /> 14 <Refine 15 dataProvider={dataProvider("https://api.fake-rest.refine.dev")} 16 routerProvider={routerProvider} 17 resources={[ 18 { 19 name: "products", 20 list: "/products", 21 }, 22 ]} 23 > 24 <Routes> 25 <Route 26 element={ 27 <ThemedLayoutV2> 28 <Outlet /> 29 </ThemedLayoutV2> 30 } 31 > 32 <Route path="/products"> 33 <Route index element={<ProductList />} /> 34 </Route> 35 </Route> 36 </Routes> 37 </Refine> 38 </BrowserRouter> 39 ); 40} 41 42// src/pages/products/list.tsx 43 44import { List, useDataGrid, DateField } from "@refinedev/mui"; 45import { DataGrid, GridColDef } from "@mui/x-data-grid"; 46 47export const ProductList = () => { 48 const { dataGridProps } = useDataGrid(); 49 50 const { data: categories, isLoading } = useMany({ 51 resource: "categories", 52 ids: 53 dataGridProps?.rows?.map((item) => item?.category?.id).filter(Boolean) ?? 54 [], 55 queryOptions: { 56 enabled: !!dataGridProps?.rows, 57 }, 58 }); 59 60 const columns = React.useMemo<GridColDef[]>( 61 () => [ 62 { field: "id", headerName: "ID", type: "number" }, 63 { field: "name", flex: 1, headerName: "Name" }, 64 { 65 field: "category", 66 flex: 1, 67 headerName: "Category", 68 display: "flex", 69 renderCell: ({ value }) => 70 isLoading 71 ? "Loading..." 72 : categories?.data?.find((item) => item.id === value?.id)?.title, 73 }, 74 { 75 field: "createdAt", 76 flex: 1, 77 headerName: "Created at", 78 display: "flex", 79 renderCell: ({ value }) => <DateField value={value} />, 80 }, 81 ], 82 [categories?.data, isLoading], 83 ); 84 85 return ( 86 <List> 87 <DataGrid {...dataGridProps} columns={columns} /> 88 </List> 89 ); 90};
The result will look like this:
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:
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 is a community-driven project, and your contributions continually improve it.
Licensed under the MIT License, Copyright © 2021-present Refinedev
No vulnerabilities found.
No security vulnerabilities found.