{"id":13422364,"url":"https://github.com/refinedev/refine","last_synced_at":"2025-09-09T19:54:23.412Z","repository":{"id":36950188,"uuid":"331293626","full_name":"refinedev/refine","owner":"refinedev","description":"A React Framework for building  internal tools, admin panels, dashboards \u0026 B2B apps with unmatched flexibility.","archived":false,"fork":false,"pushed_at":"2025-05-05T10:57:34.000Z","size":7034656,"stargazers_count":30813,"open_issues_count":32,"forks_count":2458,"subscribers_count":138,"default_branch":"main","last_synced_at":"2025-05-05T11:25:05.497Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://refine.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/refinedev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"refinedev"}},"created_at":"2021-01-20T12:01:32.000Z","updated_at":"2025-05-05T09:51:39.000Z","dependencies_parsed_at":"2024-03-29T08:26:58.998Z","dependency_job_id":"4e6160d8-ccf9-4cd7-b9c2-ec5f2e81dd7b","html_url":"https://github.com/refinedev/refine","commit_stats":{"total_commits":6078,"total_committers":278,"mean_commits":"21.863309352517987","dds":0.742678512668641,"last_synced_commit":"b59a71cdcad9bd41de35ee48daa032c2b1807973"},"previous_names":["pankod/refine"],"tags_count":2929,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/refinedev%2Frefine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/refinedev%2Frefine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/refinedev%2Frefine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/refinedev%2Frefine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/refinedev","download_url":"https://codeload.github.com/refinedev/refine/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252500317,"owners_count":21758140,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-07-30T23:00:42.788Z","updated_at":"2025-05-05T12:43:02.577Z","avatar_url":"https://github.com/refinedev.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://refine.dev/\"\u003e\n    \u003cimg alt=\"refine logo\" src=\"https://refine.ams3.cdn.digitaloceanspaces.com/readme/refine-readme-banner.png\"\u003e\n\u003c/a\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://refine.dev\"\u003eHome Page\u003c/a\u003e |\n    \u003ca href=\"https://refine.dev/docs/\"\u003eDocumentation\u003c/a\u003e |\n    \u003ca href=\"https://refine.dev/examples/\"\u003eExamples\u003c/a\u003e |\n    \u003ca href=\"https://discord.gg/refine\"\u003eDiscord\u003c/a\u003e |\n    \u003ca href=\"https://refine.dev/blog/\"\u003eBlog\u003c/a\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n\u003cdiv align=\"center\"\u003e\u003cstrong\u003eThe sweet spot between the low/no code and “starting from scratch” for CRUD-heavy applications.\u003c/strong\u003e\u003cbr\u003e 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.\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\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=\u0026logo=discord\u0026logoColor=ffffff\u0026color=7389D8\u0026labelColor=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\u003c/div\u003e\n\n\u003cbr/\u003e\n\n[![how-refine-works](https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/diagram-3.png)](https://refine.dev)\n\n## What is Refine?\n\n**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.\n\nRefine'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**.\n\nRefine'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\n\nStart a new project with Refine 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\u003ca href=\"https://refine.dev/?playground=true\" target=\"_blank\"\u003e\n  \u003cimg height=\"48\" width=\"245\" src=\"https://refine.ams3.cdn.digitaloceanspaces.com/assets/try-it-in-your-browser.png\" /\u003e\n\u003c/a\u003e\n\n## Quick Start\n\nHere's Refine in action, the below code is an example of a simple CRUD application using Refine + React Router + Material UI:\n\n```tsx\nimport React from \"react\";\nimport { Refine, useMany } from \"@refinedev/core\";\nimport { ThemedLayoutV2 } from \"@refinedev/mui\";\nimport dataProvider from \"@refinedev/simple-rest\";\nimport routerProvider from \"@refinedev/react-router-v6\";\nimport { BrowserRouter, Outlet, Route, Routes } from \"react-router-dom\";\n\nimport CssBaseline from \"@mui/material/CssBaseline\";\n\nexport default function App() {\n  return (\n    \u003cBrowserRouter\u003e\n      \u003cCssBaseline /\u003e\n      \u003cRefine\n        dataProvider={dataProvider(\"https://api.fake-rest.refine.dev\")}\n        routerProvider={routerProvider}\n        resources={[\n          {\n            name: \"products\",\n            list: \"/products\",\n          },\n        ]}\n      \u003e\n        \u003cRoutes\u003e\n          \u003cRoute\n            element={\n              \u003cThemedLayoutV2\u003e\n                \u003cOutlet /\u003e\n              \u003c/ThemedLayoutV2\u003e\n            }\n          \u003e\n            \u003cRoute path=\"/products\"\u003e\n              \u003cRoute index element={\u003cProductList /\u003e} /\u003e\n            \u003c/Route\u003e\n          \u003c/Route\u003e\n        \u003c/Routes\u003e\n      \u003c/Refine\u003e\n    \u003c/BrowserRouter\u003e\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 = () =\u003e {\n  const { dataGridProps } = useDataGrid();\n\n  const { data: categories, isLoading } = useMany({\n    resource: \"categories\",\n    ids:\n      dataGridProps?.rows?.map((item) =\u003e item?.category?.id).filter(Boolean) ??\n      [],\n    queryOptions: {\n      enabled: !!dataGridProps?.rows,\n    },\n  });\n\n  const columns = React.useMemo\u003cGridColDef[]\u003e(\n    () =\u003e [\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        renderCell: ({ value }) =\u003e\n          isLoading\n            ? \"Loading...\"\n            : categories?.data?.find((item) =\u003e item.id === value?.id)?.title,\n      },\n      {\n        field: \"createdAt\",\n        flex: 1,\n        headerName: \"Created at\",\n        renderCell: ({ value }) =\u003e \u003cDateField value={value} /\u003e,\n      },\n    ],\n    [categories?.data, isLoading],\n  );\n\n  return (\n    \u003cList\u003e\n      \u003cDataGrid {...dataGridProps} columns={columns} autoHeight /\u003e\n    \u003c/List\u003e\n  );\n};\n```\n\nThe result will look like this:\n\n[![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)\n\n## Use cases\n\n**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**.\n\nYou can take a look at some live examples that can be built using **Refine** 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** powered different usage scenarios can be found here](https://refine.dev/docs/examples#other-examples)\n\n## Key Features\n\n- Refine 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/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/).\n- SSR support with Next.js \u0026 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 \u0026 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 \u0026 document versioning\n\n## Learning Refine\n\n- Navigate to the [Tutorial](https://refine.dev/docs/tutorial/introduction/index/) on building comprehensive CRUD application guides you through each step of the process.\n- Visit the [Guides \u0026 Concepts](https://refine.dev/docs/guides-concepts/general-concepts/) to get informed about the fundamental concepts.\n- Read more on [Advanced Tutorials](https://refine.dev/docs/advanced-tutorials/) for different usage scenarios.\n\n## Contribution\n\n[Refer to the contribution docs for more information.](https://refine.dev/docs/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 is a community-driven project, and your contributions continually improve it.\n\n\u003cbr/\u003e\n\n\u003ca href=\"https://github.com/refinedev/refine/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=refinedev/refine\u0026max=400\u0026columns=20\" /\u003e\n\u003c/a\u003e\n\n## License\n\nLicensed under the MIT License, Copyright © 2021-present Refinedev\n","funding_links":["https://github.com/sponsors/refinedev"],"categories":["UI Frameworks","二、React 框架（完整开发方案）","TypeScript","网络服务","typescript","Uncategorized","Examples","Developer Tools"],"sub_categories":["Component Collections","2. 教程与实战指南","网络服务_其他","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frefinedev%2Frefine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frefinedev%2Frefine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frefinedev%2Frefine/lists"}