{"repo":"refinedev/refine","free":true,"listed":false,"github":"https://github.com/refinedev/refine","clone":"git clone https://github.com/refinedev/refine.git","description":"A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.","language":"TypeScript","stars":35526,"topics":["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"],"license":"MIT","category":"saas_starter","readme_excerpt":"
\n\n \"refine\n\n\n
\n
\n\n
\n Home Page |\n Documentation |\n Examples |\n Discord |\n Blog |\n Refine\n
\n
\n\n
\n
\n\n
The sweet spot between the low/no code and “starting from scratch” for CRUD-heavy applications.
\n\nRefine Core is an open source, React meta-framework for enterprise. It provides a headless solution for everything from admin panels to\ndashboards and internal tools.\n
\n\nRefine CORE also powers Refine's purpose built AI agent.\n
\n\n
\n\n
\n\n[![Awesome](https://github.com/refinedev/awesome-refine/raw/main/images/badge.svg)](https://github.com/refinedev/awesome-refine)\n[![OpenSSF Best Practices](https://www.bestpractices.dev/projects/8101/badge)](https://www.bestpractices.dev/projects/8101)\n[![npm version](https://img.shields.io/npm/v/@refinedev/core.svg)](https://www.npmjs.com/package/@refinedev/core)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE_OF_CONDUCT.md)\n\n[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/refine)\n[![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)](https://twitter.com/refine_dev)\n\n
\n\n
\n\n[![how-refine-works](https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/diagram-3.png)](https://refine.dev/core)\n\n## What is Refine CORE?\n\n**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.\n\nRefine 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**.\n\nRefine CORE's headless architecture enables the building of highly customizable applications by decoupling business logic from UI and routing. This allows integration with:\n\n- 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/).\n\n- Various platforms, including Next.js, Remix, React Native, Electron, etc., by a simple routing interface without the need for additional setup steps.\n\n## ⚡ Try Refine CORE\n\nStart a new project with Refine CORE in seconds using the following command:\n\n```sh\nnpm create refine-app@latest my-refine-app\n```\n\nOr you can create a new project on your browser:\n\n\n \n\n\n
\n\nYou can also try Refine's AI agent for free to create projects:\n\n\n \n\n\n## Quick Start\n\nHere's Refine CORE in action, the below code is an example of a simple CRUD application using Refine CORE + React Router + Material UI:\n\n```tsx\nimport React from \"react\";\nimport { Refine, useMany } from \"@refinedev/core\";\nimport { ThemedLayout } from \"@refinedev/mui\";\nimport dataProvider from \"@refinedev/simple-rest\";\nimport routerProvider from \"@refinedev/react-router\";\nimport { BrowserRouter, Outlet, Route, Routes } from \"react-router\";\n\nimport CssBaseline from \"@mui/material/CssBaseline\";\n\nexport default function App() {\n return (\n \n \n \n \n \n \n \n }\n >\n \n } />\n \n \n \n \n \n );\n}\n\n// src/pages/products/list.tsx\n\nimport { List, useDataGrid, DateField } from \"@refinedev/mui\";\nimport { DataGrid, GridColDef } from \"@mui/x-data-grid\";\n\nexport const ProductList = () => {\n const { dataGridProps } = useDataGrid();\n\n const { data: categories, isLoading } = useMany({\n resource: \"categories\",\n ids:\n dataGridProps?.rows?.map((item) => item?.category?.id).filter(Boolean) ??\n [],\n queryOptions: {\n enabled: !!dataGridProps?.rows,\n },\n });\n\n const columns = React.useMemo(\n () => [\n { field: \"id\", headerName: \"ID\", type: \"number\" },\n { field: \"name\", flex: 1, headerName: \"Name\" },\n {\n field: \"category\",\n flex: 1,\n headerName: \"Category\",\n display: \"flex\",\n renderCell: ({ value }) =>\n isLoading\n ? \"Loading...\"\n : categories?.data?.find((item) => item.id === value?.id)?.title,\n },\n {\n field: \"createdAt\",\n flex: 1,\n headerName: \"Created at\",\n display: \"flex\",\n renderCell: ({ value }) => ,\n },\n ],\n [categories?.data, isLoading],\n );\n\n return (\n \n \n \n );\n};\n```\n\nThe result will look like this:\n\n[![Refine CORE + 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)\n\n## Use cases\n\n**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**.\n\nYou can take a look at some live examples that can be built using **Refine CORE** from scratch:\n\n- [Fully-functional CRM Application](https://refine.dev/templates/crm-application/)\n- [Fully-functional Admin Panel](https://refine.dev/templates/react-admin-panel/)\n- [Win95 Style Admin panel 🪟](https://refine.dev/templates/win-95-style-admin-panel/)\n- [PDF Invoice Generator](https://refine.dev/templates/react-pdf-invoice-generator/)\n- [Medium Clone - Real World Example](https://refine.dev/templates/react-crud-app/)\n- [Multitenancy Example](https://refine.dev/templates/multitenancy-strapi/)\n- [Storefront](https://refine.dev/templates/next-js-ecommerce-store/)\n- [Refer to templates page for more examples](https://refine.dev/templates/)\n- [More **Refine CORE** powered different usage scenarios can be found here](https://refine.dev/core/templates)\n\n## Key Features\n\n- Refine CORE Devtools - dive deeper into your app and provide useful insights\n- Connectors for **15+ backend services** including [REST API](https://github.com/refinedev/refine/tree/main/packages/simple-rest), [GraphQL](https://github.com/refinedev/refine/tree/main/packages/graphql), [NestJs CRUD](https://github.com/refinedev/refine/tree/main/packages/nestjsx-crud), [Airtable](https://github.com/refinedev/refine/tree/main/packages/airtable), [Strapi](https://github.com/refinedev/refine/tree/main/packages/strapi), [Strapi v4](https://github.com/refinedev/refine/tree/main/packages/strapi-v4), [Supabase](https://github.com/refinedev/refine/tree/main/packages/supabase), [Hasura](https://github.com/refinedev/refine/tree/main/packages/hasura), [Appwrite](https://github.com/refinedev/refine/tree/main/packages/appwrite), [Nestjs-Query](https://github.com/refinedev/refine/tree/main/packages/nestjs-query), [Firebase](https://firebase.google.com/), [Sanity](https://www.sanity.io/), and [Directus](https://directus.io/).\n- SSR support with Next.js & Remix and Advanced routing with any router library of your choice\n- Auto-generation of CRUD UIs based on your API data structure\n- Perfect state management & mutations with React Query\n- Providers for seamless authentication and access control flows\n- Out-of-the-box support for live / real-time applications\n- Easy audit logs & document versioning\n\n## Learning Refine CORE\n\n- Navigate to the [Tutorial](https://refine.dev/core/tutorial/essentials/intro/) on building comprehensive CRUD application guides you through each step of the process.\n- Visit the [Guides & Concepts](https://refine.dev/core/docs/guides-concepts/general-concepts/) to get informed about the fundamental concepts.\n- Read more on [Advanced Tutorials](https://refine.dev/core/docs/advanced-tutorials/) for different usage scenarios.\n\n## Contribution\n\n[Refer to the contribution docs for more information.](https://refine.dev/core/docs/guides-concepts/contributing/#ways-to-contribute)\n\nIf you have any doubts related to the project or want to discuss something, then join our [Discord server](https://discord.gg/refine).\n\n## Contributors ♥️ Thanks\n\nWe 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.\n\nRefine CORE is a community-driven project, and your contributions continually improve it.\n\n
\n\n