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.
[](https://github.com/refinedev/awesome-refine)
[](https://www.bestpractices.dev/projects/8101)
[](https://www.npmjs.com/package/@refinedev/core)
[](CODE_OF_CONDUCT.md)
[](https://discord.gg/refine)
[](https://twitter.com/refine_dev)
[](https://refine.dev)
## 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](https://tailwindcss.com/), along with built-in support for [Ant Design](https://ant.design/), [Material UI](https://mui.com/material-ui/getting-started/overview/), [Mantine](https://mantine.dev/), and [Chakra UI](https://chakra-ui.com/).
- 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:
```sh
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:
```tsx
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 (
}
>
} />
);
}
// 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" },
{
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 }) => ,
},
],
[categories?.data, isLoading],
);
return (
);
};
```
The result will look like this:
[](https://refine.new/preview/c85442a8-8df1-4101-a09a-47d3ca641798)
## 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:
- [Fully-functional CRM Application](https://refine.dev/templates/crm-application/)
- [Fully-functional Admin Panel](https://refine.dev/templates/react-admin-panel/)
- [Win95 Style Admin panel 🪟](https://refine.dev/templates/win-95-style-admin-panel/)
- [PDF Invoice Generator](https://refine.dev/templates/react-pdf-invoice-generator/)
- [Medium Clone - Real World Example](https://refine.dev/templates/react-crud-app/)
- [Multitenancy Example](https://refine.dev/templates/multitenancy-strapi/)
- [Storefront](https://refine.dev/templates/next-js-ecommerce-store/)
- [Refer to templates page for more examples](https://refine.dev/templates/)
- [More **Refine** powered different usage scenarios can be found here](https://refine.dev/docs/examples#other-examples)
## Key Features
- Refine Devtools - dive deeper into your app and provide useful insights
- Connectors for **15+ backend services** including [REST API](https://github.com/refinedev/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/refinedev/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/refinedev/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/refinedev/refine/tree/master/packages/airtable), [Strapi](https://github.com/refinedev/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/refinedev/refine/tree/master/packages/strapi-v4), [Supabase](https://github.com/refinedev/refine/tree/master/packages/supabase), [Hasura](https://github.com/refinedev/refine/tree/master/packages/hasura), [Appwrite](https://github.com/refinedev/refine/tree/master/packages/appwrite), [Nestjs-Query](https://github.com/refinedev/refine/tree/master/packages/nestjs-query), [Firebase](https://firebase.google.com/), [Sanity](https://www.sanity.io/), and [Directus](https://directus.io/).
- 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](https://refine.dev/docs/tutorial/introduction/index/) on building comprehensive CRUD application guides you through each step of the process.
- Visit the [Guides & Concepts](https://refine.dev/docs/guides-concepts/general-concepts/) to get informed about the fundamental concepts.
- Read more on [Advanced Tutorials](https://refine.dev/docs/advanced-tutorials/) for different usage scenarios.
## Contribution
[Refer to the contribution docs for more information.](https://refine.dev/docs/contributing/#ways-to-contribute)
If you have any doubts related to the project or want to discuss something, then join our [Discord server](https://discord.gg/refine).
## 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
Licensed under the MIT License, Copyright © 2021-present Refinedev
