An open-source, headless web application framework developed with flexibility in mind.

What is refine?
refine is a React-based framework for the rapid
refine is headless by design, thereby offering unlimited styling and customization options.
What do you mean by "headless"?
Instead of being a limited set of pre-styled components, refine is a collection of helper hooks
, components
, and providers
. They are all decoupled from UI components and business logic, so that they never keep you from customizing your UI or coding your own flow.
refine seamlessly works with any custom design or UI framework that you favor. For convenience, it ships with ready-made integrations for Ant Design System, Material UI, Mantine, and Chakra UI.
π₯ Try refine online in just 10 seconds

refine.new is a powerful open-source browser tool that lets you create refine apps.
You can preview, modify, and download your project immediately, thereby streamlining the development process.
Use cases
refineΒ shines on data-intensive
You can take a look at some live examples that can be built using refine from scratch:



Key Features
Quick Start
The fastest way to get started with refine is by using the create refine-app
project starter tool or using refine.new browser tool.
Using refine.new browser tool
refine.new lets you create a new refine application by making step-by-step selections directly in your browser.
You can choose the libraries and frameworks you want to work with, and the tool will generate a downloadable boilerplate code for you.
create refine-app
Using Run the following command to create a new refine project configured with Ant Design System as the default UI framework:
npm create refine-app@latest -- -o refine-antd
Once the setup is complete, navigate to the project folder and start your project with:
npm run dev
Your refine application will be accessible at http://localhost:3000:
Let's consume a public fake REST API
and add two resources (blog_posts, categories) to our project. Replace the contents of src/App.tsx
with the following code:
import { Refine } from "@refinedev/core";
import {
notificationProvider,
ErrorComponent,
ThemedLayout,
} from "@refinedev/antd";
import routerProvider, { NavigateToResource } from "@refinedev/react-router-v6";
import dataProvider from "@refinedev/simple-rest";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
import { AntdInferencer } from "@refinedev/inferencer/antd";
import "@refinedev/antd/dist/reset.css";
const App: React.FC = () => {
return (
<BrowserRouter>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
notificationProvider={notificationProvider}
resources={[
{
name: "blog_posts",
list: "/blog-posts",
show: "/blog-posts/show/:id",
create: "/blog-posts/create",
edit: "/blog-posts/edit/:id",
meta: { canDelete: true },
},
{
name: "categories",
list: "/categories",
show: "/categories/show/:id",
},
]}
>
<Routes>
<Route
element={
<ThemedLayout>
<Outlet />
</ThemedLayout>
}
>
<Route index element={<NavigateToResource />} />
<Route path="blog-posts">
<Route index element={<AntdInferencer />} />
<Route
path="show/:id"
element={<AntdInferencer />}
/>
<Route path="create" element={<AntdInferencer />} />
<Route
path="edit/:id"
element={<AntdInferencer />}
/>
</Route>
<Route path="categories">
<Route index element={<AntdInferencer />} />
<Route
path="show/:id"
element={<AntdInferencer />}
/>
</Route>
<Route path="*" element={<ErrorComponent />} />
</Route>
</Routes>
</Refine>
</BrowserRouter>
);
};
export default App;
list
, show
, create
, and edit
pages based on the data fetched from the API and generates the pages automatically.
Now, you should see the output as a table populated with blog_posts
& category
data:
You can get the auto-generated page codes by clicking the Show Code
button on each page. Afterward, simply pass the pages to the resources
array by replacing them with the Inferencer components.
Next Steps
Stargazers
Contribution
If you have any doubts related to the project or want to discuss something, then join our Discord Server.
β₯οΈ Contributors
Our
License
Licensed under the MIT License, Copyright Β© 2021-present Refinedev