{"_id":"@pankod/refine-antd","_rev":"207-ab7a43740742ed283b6dfca5527d6907","name":"@pankod/refine-antd","dist-tags":{"alpha":"3.18.2","latest":"4.9.0","next":"4.8.0"},"versions":{"3.0.0":{"name":"@pankod/refine-antd","version":"3.0.0","description":"refine is a React-based framework for building data-intensive applications in no time. It ships with Ant Design System, an enterprise-level UI toolkit.","private":false,"main":"dist/index.js","module":"dist/refine-antd.esm.js","typings":"dist/index.d.ts","scripts":{"start":"tsdx watch --tsconfig tsconfig.json --verbose --noClean","build":"tsdx build --tsconfig tsconfig.json","prepare":"tsdx build","test":"tsdx test --passWithNoTests --runInBand","size":"size-limit","analyze":"size-limit --why","generate-theme":"npx @emeks/antd-custom-theme-generator -w --antd ../../node_modules/antd ./src/assets/styles/custom-theme.less ./src/assets/styles/styles.min.css"},"peerDependencies":{"antd":"^4.17.1","dayjs":"^1.10.7","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@babel/core":"^7.13.14","@rollup/plugin-image":"^2.0.6","@size-limit/preset-small-lib":"^5.0.5","@testing-library/jest-dom":"^5.12.0","@testing-library/react":"^11.2.6","@testing-library/react-hooks":"^5.0.3","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.24","@types/lodash":"^4.14.171","@types/papaparse":"^5.2.5","@types/pluralize":"^0.0.29","@types/qs":"^6.9.7","@types/react":"^17.0.4","@types/react-csv":"^1.1.1","@types/react-dom":"^17.0.4","@types/react-router-dom":"^5.1.8","@types/testing-library__jest-dom":"^5.9.5","babel-plugin-module-resolver":"^4.1.0","identity-obj-proxy":"^3.0.0","msw":"^0.26.2","postcss":"^8.1.4","react-router-dom":"^5.3.0","rollup-plugin-copy":"^3.4.0","rollup-plugin-postcss":"^4.0.0","size-limit":"^5.0.5","tsdx":"^0.14.1","typescript":"^4.4.3"},"dependencies":{"@ant-design/icons":"^4.5.0","@pankod/refine-core":"^3.0.0","@supabase/supabase-js":"^1.22.4","antd":"^4.17.1","dayjs":"^1.10.7","export-to-csv":"^0.2.1","humanize-string":"^2.1.0","lodash":"^4.17.21","lodash-es":"^4.17.21","papaparse":"^5.3.0","pluralize":"^8.0.0","qs":"^6.10.1","react-csv":"^2.0.3","react-markdown":"^6.0.1","react-query":"^3.19.2","remark-gfm":"^1.0.0","sunflower-antd":"1.0.0-beta.3","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"eaf89e89826c676be4d69eeae428bacd974b524b","publishConfig":{"access":"public"},"_id":"@pankod/refine-antd@3.0.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/4.0.0/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-gbN8B6N3YOpuFc33Dh0QFGZoLWKCDXFDZFZCHZPK5f9PyD0xe4bo1smr8Senm9aICiSBuAkbBR0fDWPLUrDmXw==","shasum":"db447a0918fb3a53545746159ef6470b18c5a7e2","tarball":"https://registry.npmjs.org/@pankod/refine-antd/-/refine-antd-3.0.0.tgz","fileCount":236,"unpackedSize":2654257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5VhhCRA9TVsSAnZWagAAmvAP/AzEJU/Kd8OXD/ZRn2dn\nK4+BO4Vv3AAaINScHml5cwWm2p9mLtMBt0w5Ef3pb/ge7SADuzw7LLkKF28h\n1ezg5a8IJaGCMfmUPrlDwDoqJHUkZ28eD2YYsCFQj3Mqge87zpIc2JNVqT+J\n2EnqduuKWNbbd9w5RKTYHE44l3gcOjNMQkv4dScq7Abnyy2YnsdJqBknD8Sj\nHCoh/aIvPkS4IgqxPwVPhwqjx8PYFkbJgv/in0OpbngGqcxRDu9oxVaj7/g+\nea8DgD8i3T34QpFrKAZQJrKmoiAMg/DyCA4PeOq85oxpeoprdARiGjcnRs7t\n1BzLBTPoRm0MpUFYX6A3CEFldAlaSNIa9SkFgqEHLUdOUlGq82ZaiJV252Wv\nDRK4+wAScb/12jC/2Sd4JtZhJfx+6Y9ZQAP92VBfrp0Zq7lQ8FSSNqprQvCR\nbketIKJHjh6g4+p+1njj3ex/XIsMouhxfK1wnvkBfu4YHb39oVtvdGqTn4FD\n0D5qzhHTDIJF0isB6NAtthrVtLOdY0Shj7KveEe6GwnW0vwmnTj1bW8FpM9V\nJ8Wnof7YfImla26+3ZLjWea8fhHUawDCmR57dRhha74AxaNGsI44+3nbjLcT\nmFaZhJlG+JGG+UD8KqL30NjAfD43iRkHmbZClgO/Sf9wtSx+G87K8tSy7UiN\nQFmC\r\n=Ouyl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEOCUm7DlKypF4MGvo+WyEiVvNvzT99mfulfhAiiPAudAiBXNdjs0XHK9bQCG7p+CsY1hNVCovOQ/fgMJoLnqUHiLw=="}]},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"mhrrmk","email":"mkocadere@gmail.com"},{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"aydinakyol","email":"aydinakyol11@gmail.com"},{"name":"necatiozmen","email":"necati.ozmen.9@gmail.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-antd_3.0.0_1642420321565_0.9211919812109406"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released π The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"3.0.1":{"name":"@pankod/refine-antd","version":"3.0.1","description":"refine is a React-based framework for building data-intensive applications in no time. It ships with Ant Design System, an enterprise-level UI toolkit.","private":false,"main":"dist/index.js","module":"dist/refine-antd.esm.js","typings":"dist/index.d.ts","scripts":{"start":"tsdx watch --tsconfig tsconfig.json --verbose --noClean","build":"tsdx build --tsconfig tsconfig.json","prepare":"tsdx build","test":"tsdx test --passWithNoTests --runInBand","size":"size-limit","analyze":"size-limit --why","generate-theme":"npx @emeks/antd-custom-theme-generator -w --antd ../../node_modules/antd ./src/assets/styles/custom-theme.less ./src/assets/styles/styles.min.css"},"peerDependencies":{"antd":"^4.17.1","dayjs":"^1.10.7","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@babel/core":"^7.13.14","@rollup/plugin-image":"^2.0.6","@size-limit/preset-small-lib":"^5.0.5","@testing-library/jest-dom":"^5.12.0","@testing-library/react":"^11.2.6","@testing-library/react-hooks":"^5.0.3","@testing-library/user-event":"^12.8.3","@types/jest":"^26.0.24","@types/lodash":"^4.14.171","@types/papaparse":"^5.2.5","@types/pluralize":"^0.0.29","@types/qs":"^6.9.7","@types/react":"^17.0.4","@types/react-csv":"^1.1.1","@types/react-dom":"^17.0.4","@types/react-router-dom":"^5.1.8","@types/testing-library__jest-dom":"^5.9.5","babel-plugin-module-resolver":"^4.1.0","identity-obj-proxy":"^3.0.0","msw":"^0.26.2","postcss":"^8.1.4","react-router-dom":"^5.3.0","rollup-plugin-copy":"^3.4.0","rollup-plugin-postcss":"^4.0.0","size-limit":"^5.0.5","tsdx":"^0.14.1","typescript":"^4.4.3"},"dependencies":{"@ant-design/icons":"^4.5.0","@pankod/refine-core":"^3.0.1","@supabase/supabase-js":"^1.22.4","antd":"^4.17.1","dayjs":"^1.10.7","export-to-csv":"^0.2.1","humanize-string":"^2.1.0","lodash":"^4.17.21","lodash-es":"^4.17.21","papaparse":"^5.3.0","pluralize":"^8.0.0","qs":"^6.10.1","react-csv":"^2.0.3","react-markdown":"^6.0.1","react-query":"^3.19.2","remark-gfm":"^1.0.0","sunflower-antd":"1.0.0-beta.3","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"ac7156d239d77c057d0c867b111d08fbe5972344","publishConfig":{"access":"public"},"readme":"
refine is a React-based framework for building data-intensive applications in no time β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://twitter.com/intent/tweet?text=A%20React-based%20framework%20for%20building%20data-intensive%20applications%20in%20no%20time.&url=https://github.com/pankod/refine&hashtags=opensource,react,reactquery,antdesign)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine)\n[](https://www.npmjs.com/package/@pankod/refine)\n[](code_of_conduct.md)\n[](https://discord.gg/UuU3XCc3J5)\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## Key features\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain Javascript.\n\nπ **Decoupled UI** : UI components are exposed directly without encapsulation. You have full control on UI elements.\n\nπ **Powerful Default UI** : Works seamlessly with integrated [Ant Design System](https://ant.design/). (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building data-intensive applications in no time β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://twitter.com/intent/tweet?text=A%20React-based%20framework%20for%20building%20data-intensive%20applications%20in%20no%20time.&url=https://github.com/pankod/refine&hashtags=opensource,react,reactquery,antdesign)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine)\n[](https://www.npmjs.com/package/@pankod/refine)\n[](code_of_conduct.md)\n[](https://discord.gg/UuU3XCc3J5)\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## Key features\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain Javascript.\n\nπ **Decoupled UI** : UI components are exposed directly without encapsulation. You have full control on UI elements.\n\nπ **Powerful Default UI** : Works seamlessly with integrated [Ant Design System](https://ant.design/). (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building data-intensive applications in no time β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://twitter.com/intent/tweet?text=A%20React-based%20framework%20for%20building%20data-intensive%20applications%20in%20no%20time.&url=https://github.com/pankod/refine&hashtags=opensource,react,reactquery,antdesign)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine)\n[](https://www.npmjs.com/package/@pankod/refine)\n[](code_of_conduct.md)\n[](https://discord.gg/UuU3XCc3J5)\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## Key features\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain Javascript.\n\nπ **Decoupled UI** : UI components are exposed directly without encapsulation. You have full control on UI elements.\n\nπ **Powerful Default UI** : Works seamlessly with integrated [Ant Design System](https://ant.design/). (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based headless framework for building data-intensive applications in no time β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://twitter.com/intent/tweet?text=A%20React-based%20framework%20for%20building%20data-intensive%20applications%20in%20no%20time.&url=https://github.com/pankod/refine&hashtags=opensource,react,reactquery,antdesign)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine)\n[](https://www.npmjs.com/package/@pankod/refine)\n[](code_of_conduct.md)\n[](https://discord.gg/UuU3XCc3J5)\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## Key features\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain Javascript.\n\nπ **Decoupled UI** : UI components are exposed directly without encapsulation. You have full control on UI elements.\n\nπ **Powerful Default UI** : Works seamlessly with integrated [Ant Design System](https://ant.design/). (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based headless framework for building data-intensive applications in no time β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://twitter.com/intent/tweet?text=A%20React-based%20framework%20for%20building%20data-intensive%20applications%20in%20no%20time.&url=https://github.com/pankod/refine&hashtags=opensource,react,reactquery,antdesign)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine)\n[](https://www.npmjs.com/package/@pankod/refine)\n[](code_of_conduct.md)\n[](https://discord.gg/UuU3XCc3J5)\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## Key features\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain Javascript.\n\nπ **Decoupled UI** : UI components are exposed directly without encapsulation. You have full control on UI elements.\n\nπ **Powerful Default UI** : Works seamlessly with integrated [Ant Design System](https://ant.design/). (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based headless framework for building data-intensive applications in no time β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://twitter.com/intent/tweet?text=A%20React-based%20framework%20for%20building%20data-intensive%20applications%20in%20no%20time.&url=https://github.com/pankod/refine&hashtags=opensource,react,reactquery,antdesign)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine)\n[](https://www.npmjs.com/package/@pankod/refine)\n[](code_of_conduct.md)\n[](https://discord.gg/UuU3XCc3J5)\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## Key features\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain Javascript.\n\nπ **Decoupled UI** : UI components are exposed directly without encapsulation. You have full control on UI elements.\n\nπ **Powerful Default UI** : Works seamlessly with integrated [Ant Design System](https://ant.design/). (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based headless framework for building data-intensive applications in no time β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://twitter.com/intent/tweet?text=A%20React-based%20framework%20for%20building%20data-intensive%20applications%20in%20no%20time.&url=https://github.com/pankod/refine&hashtags=opensource,react,reactquery,antdesign)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine)\n[](https://www.npmjs.com/package/@pankod/refine)\n[](code_of_conduct.md)\n[](https://discord.gg/UuU3XCc3J5)\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## Key features\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain Javascript.\n\nπ **Decoupled UI** : UI components are exposed directly without encapsulation. You have full control on UI elements.\n\nπ **Powerful Default UI** : Works seamlessly with integrated [Ant Design System](https://ant.design/). (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based headless framework for building data-intensive applications in no time β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/UuU3XCc3J5)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine)\n[](https://www.npmjs.com/package/@pankod/refine)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based **headless** framework for building data-intensive applications in no time :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : So you can bring your own UI and fuel it with Refine for top speed development.\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building data-intensive applications in no time β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/UuU3XCc3J5)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building data-intensive applications in no time :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building data-intensive applications in no time β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/UuU3XCc3J5)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building data-intensive applications in no time :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building data-intensive applications in no time β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/UuU3XCc3J5)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building data-intensive applications in no time :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
refine is a React-based framework for building internal tools, rapidly. β¨ It ships with Ant Design System, an enterprise-level UI toolkit.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\n\n
\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\nπ₯ **Headless** : Works with any UI framework\n\nβοΈ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\nπ¦ **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\nπ **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\nπ **Native Typescript Core** : You can always opt out for plain JavaScript.\n\nπ **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\nπ **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n \n\n
\n \n
\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n \n\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. Open source, headless web application framework developed with flexibility in mind.
\n\n \n\n
\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n
Build your React-based CRUD applications, without constraints. An open source, headless web application framework developed with flexibility in mind.\n\n \n \n\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n
Build your React-based CRUD applications, without constraints. An open source, headless web application framework developed with flexibility in mind.\n\n \n \n\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n
Build your React-based CRUD applications, without constraints. An open source, headless web application framework developed with flexibility in mind.\n\n \n \n\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n
Build your React-based CRUD applications, without constraints. An open source, headless web application framework developed with flexibility in mind.\n\n \n \n\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n
Build your React-based CRUD applications, without constraints. An open source, headless web application framework developed with flexibility in mind.\n\n \n \n\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n
Build your React-based CRUD applications, without constraints. An open source, headless web application framework developed with flexibility in mind.\n\n \n \n\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n
Build your React-based CRUD applications, without constraints. An open source, headless web application framework developed with flexibility in mind.\n\n \n \n\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n
Build your React-based CRUD applications, without constraints. An open source, headless web application framework developed with flexibility in mind.\n\n \n \n\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n
Build your React-based CRUD applications, without constraints. An open source, headless web application framework developed with flexibility in mind.\n\n \n \n\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n
Build your React-based CRUD applications, without constraints. An open source, headless web application framework developed with flexibility in mind.\n\n \n \n\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n
Build your React-based CRUD applications, without constraints. An open source, headless web application framework developed with flexibility in mind.\n\n \n \n\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n
Build your React-based CRUD applications, without constraints. An open source, headless web application framework developed with flexibility in mind.\n\n \n \n\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n
Build your React-based CRUD applications, without constraints. An open source, headless web application framework developed with flexibility in mind.\n\n \n \n\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n
Build your React-based CRUD applications, without constraints. An open source, headless web application framework developed with flexibility in mind.\n\n \n \n\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n
Build your React-based CRUD applications, without constraints. An open source, headless web application framework developed with flexibility in mind.\n\n \n \n\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n
Build your React-based CRUD applications, without constraints. An open source, headless web application framework developed with flexibility in mind.\n\n \n \n\n\n[](https://discord.gg/refine)\n[](https://twitter.com/refine_dev)\n\n\n\n
![](\"https://raw.githubusercontent.com/pankod/refine/master/logo.png\"){kind=logo}
\n\n![\"refine:](\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=319164&theme=light\")
\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine)\n[](https://www.npmjs.com/package/@pankod/refine)\n[](code_of_conduct.md)\n[](https://discord.gg/UuU3XCc3J5)\n\n![](\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/refine_architecture.png\")
\n![](\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/benchmark.png\")
\n![](\"https://github.com/pankod/refine/blob/master/documentation/static/img/refine-promo-gif.gif?raw=true\")
\n![\"refine](\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=362220&theme=light\")
\n\n[](https://meercode.io/)\n[](https://meercode.io/)\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n![\"refine](\"https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=362220&theme=light&period=daily\"){kind=icon}
\n\n[](https://codeclimate.com/github/pankod/refine/maintainability)\n[](https://codeclimate.com/github/pankod/refine/test_coverage)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n![](\"https://github.com/refinedev/refine/blob/master/documentation/static/img/refine-promo-gif.gif?raw=true\")
\n![\"how-works-refine\"](\"https://user-images.githubusercontent.com/18739364/200257042-3f2aa7f7-a07f-4824-8d2a-b25f26b6fd32.png\")
\n![](\"https://user-images.githubusercontent.com/18739364/204285956-cc20fa11-b769-4bd5-b8f6-9c05a283ac85.gif\")
\n\n\n\n \n![](\"https://user-images.githubusercontent.com/18739364/204285047-8f24f1f4-65ea-4952-83ed-81e92cdd5b90.gif\")
\n\n\n\n \n![](\"https://user-images.githubusercontent.com/18739364/204285039-1ce0cb06-fbf8-4704-89c9-2e004620c9a8.gif\")
\n\n\n\n![](\"https://raw.githubusercontent.com/refinedev/refine/master/logo.png\"){kind=logo}
\n![](\"https://refine.ams3.cdn.digitaloceanspaces.com/refine_logo.png\"){kind=logo}
\n