{"_id":"@pankod/refine-mui","_rev":"113-152ded66e358cdf18c68ccbd76168b17","name":"@pankod/refine-mui","dist-tags":{"latest":"3.63.0","next":"3.62.0"},"versions":{"3.17.0-next.0":{"name":"@pankod/refine-mui","version":"3.17.0-next.0","description":"refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.","private":false,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --dts --format esm,cjs,iife --legacy-output","build":"tsup --dts --format esm,cjs,iife --minify --legacy-output","test":"jest --passWithNoTests --runInBand","prepare":"npm run build"},"peerDependencies":{"antd":"^4.18.8","dayjs":"^1.10.7","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@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/react":"^17.0.4","@types/react-dom":"^17.0.4","@types/testing-library__jest-dom":"^5.9.5","@types/lodash":"^4.14.171","esbuild-copy-static-files":"^0.1.0","esbuild-plugin-inline-image":"^0.0.8","identity-obj-proxy":"^3.0.0","jest":"^27.5.1","postcss":"^8.1.4","react-router-dom":"^6.0.0","ts-jest":"^27.1.3","tsup":"^5.11.13","typescript":"^4.4.3"},"dependencies":{"@emotion/react":"^11.8.2","@emotion/styled":"^11.8.1","@mui/material":"^5.5.2","lodash":"^4.17.21","lodash-es":"^4.17.21","@mui/x-data-grid":"^5.7.0","@mui/icons-material":"^5.5.1","@mui/lab":"^5.0.0-alpha.75","@pankod/refine-core":"^3.15.2","@pankod/refine-react-hook-form":"^3.16.0","notistack":"^2.0.4","dayjs":"^1.10.7","react-markdown":"^6.0.1","react-query":"^3.19.2","remark-gfm":"^1.0.0","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"_id":"@pankod/refine-mui@3.17.0-next.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-OMovrsL8j/0kVUECZSGx3E65cWDva7oT8/5Vpe5kaCckpbfsg3Ms/gAA3HZ5Wk3y6Qs5p8jS5Z7wed11lELpyw==","shasum":"d411c8873d9cecad845139097f49c99079040c3c","tarball":"https://registry.npmjs.org/@pankod/refine-mui/-/refine-mui-3.17.0-next.0.tgz","fileCount":103,"unpackedSize":1302349,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDB0vRgru/llmNcTFWEoaDEFhChNJiKD94rlHKKs1arKQIgMZA4AODHfjP2rt2j1kPumwINqgYCM6IRjSDYP71/GCc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJil41ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5KQ/7Bc2sTEDtg1zTzBONQpA3DpYnJCbzoD/4vqwrPFofPai0T8Pl\r\nXc4v40ti8reWyudu5JkvHv3MeLhU4xcrvo2/o04+BFgXD+TXzxz8x905py2+\r\ne+F4QgvsQmgOiQeiCyPwdpliSOeZHq6JSPgcYdmHHzuHplXrmXGX1spAYCBJ\r\n1LJcsFWWyhEd4QSkgh3a+pcptblnky/ASHjcHB9bzWvRMuiNd2YvupAS9izK\r\nhf8FQkr1dCp6BLke3rtnJov0B3eH2L+x4dsq802rpPlkDHit18+vz22SXC1y\r\nSzFJe4hQYzfr3KYcoCqoKn5FyuNnhrdAd0k55iTXjGIh1klTKGNJFzRLZlZW\r\nnqmPgrsA2smmp03C2fA1GaLp4HUDxz6wDbIHG6mMzE50A5aPmeq2KrbxMYJg\r\nEcXashnCxGer+uX3zVT7+lMLTjP3ei3EbCMvqhl4nLEqyHTDa1UiwIcwZ3D7\r\nN63UE92t/hobdK6brNZSw9OXB7GrIsGtlFPoIWN6bb6ppy3U9qfTIn5WOwuP\r\nY0++ACkuzIiTQrV2SAMzVI4ACYHYHU9e/woWe2EVZAgnsF1hyNQfCGKu8q39\r\nemi2YEMduZxXP6k/ng1tY0oB6QZrSQMvTuRtiy2OFXsXyJeD7bgpCVRRbT7p\r\nswEoM6+cGNJLajfIodrp7L+5jocKww05FQg=\r\n=XE74\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"aydinakyol","email":"aydinakyol11@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-mui_3.17.0-next.0_1654099289187_0.24863158726472778"},"_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.17.1-next.0":{"name":"@pankod/refine-mui","version":"3.17.1-next.0","description":"refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.","private":false,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --dts --format esm,cjs,iife --legacy-output","build":"tsup --dts --format esm,cjs,iife --minify --legacy-output","test":"jest --passWithNoTests --runInBand","prepare":"npm run build"},"peerDependencies":{"antd":"^4.18.8","dayjs":"^1.10.7","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@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/react":"^17.0.4","@types/react-dom":"^17.0.4","@types/testing-library__jest-dom":"^5.9.5","@types/lodash":"^4.14.171","esbuild-copy-static-files":"^0.1.0","esbuild-plugin-inline-image":"^0.0.8","identity-obj-proxy":"^3.0.0","jest":"^27.5.1","postcss":"^8.1.4","react-router-dom":"^6.0.0","ts-jest":"^27.1.3","tsup":"^5.11.13","typescript":"^4.4.3"},"dependencies":{"@emotion/react":"^11.8.2","@emotion/styled":"^11.8.1","@mui/material":"^5.5.2","lodash":"^4.17.21","lodash-es":"^4.17.21","@mui/x-data-grid":"^5.7.0","@mui/icons-material":"^5.5.1","@mui/lab":"^5.0.0-alpha.75","@pankod/refine-core":"^3.15.2","@pankod/refine-react-hook-form":"^3.16.0","notistack":"^2.0.4","dayjs":"^1.10.7","react-markdown":"^6.0.1","react-query":"^3.19.2","remark-gfm":"^1.0.0","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"_id":"@pankod/refine-mui@3.17.1-next.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-nRoys9ptIBNJE0Zm0QfamQNu/ftZpMWJ1grIPgSDiFZDu/XjRAB9+8T4AgmkaHf9sny/cTcX52tFb9JuhYnReg==","shasum":"f65415e2a0aba17f013272d6c5c21700c4532ed7","tarball":"https://registry.npmjs.org/@pankod/refine-mui/-/refine-mui-3.17.1-next.0.tgz","fileCount":103,"unpackedSize":1303063,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuaOSRSw68L2ibT/xxlgvm8WOHPqZ+VZlR9P5YJQTAIwIgKI/oJ+ncwCrg9QLeVC+D44CR/8TJyMEinYTPniraT3M="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJimH/IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoD4w/9ELAiuMz9ezyK0DTkU47T0AlvN87tO1j2PliecKPotxXhvKgm\r\nuuZc87IYvVEIzokUqxTbNZvxvy3DTLBiVTo20w3gTdg+E8DiFGCbt6Q5l2o5\r\nW2MUlm2MextJWyAOu+dR57PqlC7QU2SBUCxU/5/dSgxOj4k/c4MOQv+dCmm/\r\n4Kwcy60UhX8mPWFhRUkJcSBWbPaGt6aHre1iReBLnzdGqCjndi2fc5Dnglp3\r\nDQzK5pOyAoANXqSmPYs0jxGU4uFKuAJHCv1FWfo8i1ldZUOZcbHvKf89Oro8\r\nIHqxC3zEClskEPKAfLj8Q86cCSKmFgQ3buHgen9Ih9VM0Zqu69xxSm3yaQw0\r\n/2iqIybl3YRJ3D5IXQcRMM5dBipFZ23FAAzTDbkLnNnVQ664TuQnj6TC5QGW\r\nJED70M8Bu1zHi8t9IOrbvBckw28KYFmwkdFrlYGFXjotMP9C6I36iOsfMPQA\r\nHlMDr1Jd6khVODGpoAZ1H1yqz7q+F1nsHafigJGXhdArNBKP3+UmRYE/DC1d\r\nOQeyDtM/9T8lsGHbgxLZ47ReXEJP1JFN/RsomBSRFHZt9I6IyoPYKdYLR5Dl\r\nPNzJvLNHFdo6r0g5W5Jqkg7P0DLCagP9bG7aGUPrxpjAuvZZf0NJmi4eUEdd\r\noEfxw6bu1NLUhh7LEl+LxW1Tl1Yy9CmNYZM=\r\n=x1lc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"aydinakyol","email":"aydinakyol11@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-mui_3.17.1-next.0_1654161352243_0.938329155405111"},"_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.18.0-next.1":{"name":"@pankod/refine-mui","version":"3.18.0-next.1","description":"refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.","private":false,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --dts --format esm,cjs,iife --legacy-output","build":"tsup --dts --format esm,cjs,iife --minify --legacy-output","test":"jest --passWithNoTests --runInBand","prepare":"npm run build"},"peerDependencies":{"antd":"^4.18.8","dayjs":"^1.10.7","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@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/react":"^17.0.4","@types/react-dom":"^17.0.4","@types/testing-library__jest-dom":"^5.9.5","@types/lodash":"^4.14.171","esbuild-copy-static-files":"^0.1.0","esbuild-plugin-inline-image":"^0.0.8","identity-obj-proxy":"^3.0.0","jest":"^27.5.1","postcss":"^8.1.4","react-router-dom":"^6.0.0","ts-jest":"^27.1.3","tsup":"^5.11.13","typescript":"^4.4.3"},"dependencies":{"@emotion/react":"^11.8.2","@emotion/styled":"^11.8.1","@mui/material":"^5.5.2","lodash":"^4.17.21","lodash-es":"^4.17.21","@mui/x-data-grid":"^5.7.0","@mui/icons-material":"^5.5.1","@mui/lab":"^5.0.0-alpha.75","@pankod/refine-core":"^3.15.2","@pankod/refine-react-hook-form":"^3.16.0","notistack":"^2.0.4","dayjs":"^1.10.7","react-markdown":"^6.0.1","react-query":"^3.19.2","remark-gfm":"^1.0.0","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"_id":"@pankod/refine-mui@3.18.0-next.1","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-okuRAWZUycMJaLmBW5VpFibUIjIczIBvB5eN/B15PPa1Il3HAwMCGwK41T6MBVf3GEEou+SWYP2mPHPFD+fd9A==","shasum":"c0491f874d7a03ee68930d151e9e2bb78b774133","tarball":"https://registry.npmjs.org/@pankod/refine-mui/-/refine-mui-3.18.0-next.1.tgz","fileCount":103,"unpackedSize":1302954,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfER13AFEU2rRZwSyB02S2Uq4EeSGIInwvzWYPiYeAlQIgJNx2aEncjMzhUv+bWt5zK3aD8Y2DJ3o3GLZQoDOPltA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJimJMOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7rw//TkhGs+0i7vu603+mg4CpVZQerlgHROWfuhA9P1s97mCoS9H2\r\nhl/KeArqJY0sVnQrpdGa0zObyEzvx2S8A+K78wcG5gs5OcmrcLR8boI1QOWN\r\n6km5+MaPz7c6HDfJ75Do7Vtj1TcHPXpXV8Mz2jpMJWWuVYOjXQV3OYeOOaJ9\r\n4iKr5H49qP6SevQlsJg6jKdkkVyEtVSRLyop93xX99OcJiCc1c6VV7+07Oyk\r\nYXEGDHZVnYKk4HhhN1wwC3YwqBHnQqFYVe5X72lsvnBwi4dfL30EpKv09obg\r\nspMJHCFMNf43BBeTVqDmj0melo8JAfDfXlTrYvT0EFJbOO+ZlubisWtjHwVH\r\nvmGLBTRbg9ZNKR955cAlQanXjj2hi718oxbLHu5UR1p8mKgVdxoPA/FqH1td\r\nPPflCXvtSakImF9sBG168TebmKT1+aRZcqDrW06UuQYoz7IA4ROjES1qk4G/\r\none6i3yTIGeYYafuLOrXr21n4iRwGfzVdyvAHHUQpufWa6A+8SjIvAiBccai\r\neVmAqVAQRD+7zeZ6+QqiodFz0itmb1xUCTO5Y+Ax6qR1ZJDrXGIncd5ujnsh\r\nhfklpzcnLLUMR77MGxXePtXgq5wInbXUd1QESoagor3W2ybBUKmSqVkK+bD7\r\nrVyTfwBgv1uXLQBVVtmYcqbeySJt7RG5VKk=\r\n=UsUD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"aydinakyol","email":"aydinakyol11@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-mui_3.18.0-next.1_1654166286508_0.47669848976817075"},"_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.24.0-next.7":{"name":"@pankod/refine-mui","version":"3.24.0-next.7","description":"refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.","private":false,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --dts --format esm,cjs,iife --legacy-output","build":"tsup --dts --format esm,cjs,iife --minify --legacy-output","test":"jest --passWithNoTests --runInBand","prepare":"npm run build"},"peerDependencies":{"antd":"^4.18.8","dayjs":"^1.10.7","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@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/react":"^17.0.4","@types/react-dom":"^17.0.4","@types/testing-library__jest-dom":"^5.9.5","esbuild-copy-static-files":"^0.1.0","esbuild-plugin-inline-image":"^0.0.8","identity-obj-proxy":"^3.0.0","jest":"^27.5.1","postcss":"^8.1.4","react-router-dom":"^6.0.0","ts-jest":"^27.1.3","tsup":"^5.11.13","typescript":"^4.4.3"},"dependencies":{"@emotion/react":"^11.8.2","@emotion/styled":"^11.8.1","@mui/icons-material":"^5.5.1","@mui/lab":"^5.0.0-alpha.75","@mui/material":"^5.5.2","@mui/x-data-grid":"^5.7.0","@pankod/refine-core":"^3.24.0-next.7","@pankod/refine-react-hook-form":"^3.24.0-next.7","dayjs":"^1.10.7","lodash":"^4.17.21","lodash-es":"^4.17.21","notistack":"^2.0.4","react-markdown":"^6.0.1","react-query":"^3.19.2","remark-gfm":"^1.0.0","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"fb8333dbb245b9d4fcd3a0a77d7b8dec019fbac5","publishConfig":{"access":"public"},"readme":"
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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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 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/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-mui)\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/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-mui)\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/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-mui)\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/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-mui)\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/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-mui)\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/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-mui)\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/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-mui)\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/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-mui)\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/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-mui)\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/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-mui)\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/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-mui)\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/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-mui)\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/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-mui)\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-mui)\n[](https://www.npmjs.com/package/@pankod/refine-mui)\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-mui)\n[](https://www.npmjs.com/package/@pankod/refine-mui)\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-mui)\n[](https://www.npmjs.com/package/@pankod/refine-mui)\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-mui)\n[](https://www.npmjs.com/package/@pankod/refine-mui)\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-mui)\n[](https://www.npmjs.com/package/@pankod/refine-mui)\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-mui)\n[](https://www.npmjs.com/package/@pankod/refine-mui)\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-mui)\n[](https://www.npmjs.com/package/@pankod/refine-mui)\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-mui)\n[](https://www.npmjs.com/package/@pankod/refine-mui)\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-mui)\n[](https://www.npmjs.com/package/@pankod/refine-mui)\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-mui)\n[](https://www.npmjs.com/package/@pankod/refine-mui)\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-mui)\n[](https://www.npmjs.com/package/@pankod/refine-mui)\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-mui)\n[](https://www.npmjs.com/package/@pankod/refine-mui)\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-mui)\n[](https://www.npmjs.com/package/@pankod/refine-mui)\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-mui)\n[](https://www.npmjs.com/package/@pankod/refine-mui)\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-mui)\n[](https://www.npmjs.com/package/@pankod/refine-mui)\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-mui)\n[](https://www.npmjs.com/package/@pankod/refine-mui)\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-mui)\n[](https://www.npmjs.com/package/@pankod/refine-mui)\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
![](\"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-antd)\n[](https://www.npmjs.com/package/@pankod/refine-antd)\n[](code_of_conduct.md)\n\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-mui)\n[](https://www.npmjs.com/package/@pankod/refine-mui)\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-mui)\n[](https://www.npmjs.com/package/@pankod/refine-mui)\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