Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/refinedev/refine

A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
https://github.com/refinedev/refine

admin admin-ui ant-design crud developer-tools frontend-framework good-first-issue graphql hacktoberfest headless internal-tools javascript low-code nestjs nextjs open-source-project react react-framework react-hooks typescript

Last synced: 6 days ago
JSON representation

A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.

Awesome Lists containing this project

README 

        




    refine logo













    Home Page |

    Documentation |

    Examples |

    Discord |

    Blog















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.














[![Awesome](https://github.com/refinedev/awesome-refine/raw/main/images/badge.svg)](https://github.com/refinedev/awesome-refine)

[![OpenSSF Best Practices](https://www.bestpractices.dev/projects/8101/badge)](https://www.bestpractices.dev/projects/8101)

[![npm version](https://img.shields.io/npm/v/@refinedev/core.svg)](https://www.npmjs.com/package/@refinedev/core)

[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE_OF_CONDUCT.md)



[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/refine)

[![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)](https://twitter.com/refine_dev)










[![how-refine-works](https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/diagram-3.png)](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:



[![Refine + Material UI Example](https://refine.ams3.cdn.digitaloceanspaces.com/assets/refine-mui-simple-example-screenshot-rounded.webp)](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