{"id":23455090,"url":"https://github.com/ffimnsr/refine-chakra-ui-v3-ts","last_synced_at":"2025-04-11T02:44:07.608Z","repository":{"id":269065115,"uuid":"906306042","full_name":"ffimnsr/refine-chakra-ui-v3-ts","owner":"ffimnsr","description":"This repository contains a plugin for integrating Chakra UI v3 with Refine, an open-source, headless React framework for building enterprise internal tools, admin panels, dashboards, and B2B applications.","archived":false,"fork":false,"pushed_at":"2024-12-22T15:38:47.000Z","size":433,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-15T21:46:39.386Z","etag":null,"topics":["admin","chakra-ui","refine"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ffimnsr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-20T15:50:51.000Z","updated_at":"2025-01-03T09:13:42.000Z","dependencies_parsed_at":"2024-12-20T17:29:12.523Z","dependency_job_id":"fb825fae-dc86-4dc6-bb53-235b14d77c81","html_url":"https://github.com/ffimnsr/refine-chakra-ui-v3-ts","commit_stats":null,"previous_names":["ffimnsr/refine-chakra-ui-v3-ts"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ffimnsr%2Frefine-chakra-ui-v3-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ffimnsr%2Frefine-chakra-ui-v3-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ffimnsr%2Frefine-chakra-ui-v3-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ffimnsr%2Frefine-chakra-ui-v3-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ffimnsr","download_url":"https://codeload.github.com/ffimnsr/refine-chakra-ui-v3-ts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248331582,"owners_count":21085933,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["admin","chakra-ui","refine"],"created_at":"2024-12-24T03:19:04.336Z","updated_at":"2025-04-11T02:44:07.588Z","avatar_url":"https://github.com/ffimnsr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Refine Plugin for Chakra UI v3\n\nThis repository contains a plugin for integrating Chakra UI v3 with Refine, an open-source, headless React framework for building enterprise internal tools, admin panels, dashboards, and B2B applications. This plugin provides seamless integration, allowing you to leverage the powerful and accessible components of Chakra UI v3 within your Refine projects.\n\n## Chakra UI integration for Refine\n\n[Chakra UI](https://chakra-ui.com/) is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.\n\n[Refine](https://refine.dev/) is **headless by design**, offering unlimited styling and customization options. Moreover, refine ships with ready-made integrations for [Ant Design](https://ant.design/), [Material UI](https://mui.com/material-ui/getting-started/overview/), [Mantine](https://mantine.dev/), and [Chakra UI](https://chakra-ui.com/) for convenience.\n\nRefine has connectors for 15+ backend services, including REST API, [GraphQL](https://graphql.org/), and popular services like [Airtable](https://www.airtable.com/), [Strapi](https://strapi.io/), [Supabase](https://supabase.com/), [Firebase](https://firebase.google.com/), and [NestJS](https://nestjs.com/).\n\n## Installation\n\nTo use Refine with Chakra UI, you need to install the following package `@ffimnsr/refine-chakra-ui-v3` along with the Chakra UI packages:\n\n```sh\nnpm install @ffimnsr/refine-chakra-ui-v3 @chakra-ui/react\n```\n\n## ⚡ Try Refine\n\nStart a new project with Refine in seconds using the following command:\n\n```sh\nnpm create refine-app@latest my-refine-app\n```\n\nOr you can create a new project on your browser:\n\n\u003ca href=\"https://refine.dev/?playground=true\" target=\"_blank\"\u003e\n  \u003cimg height=\"48\" width=\"245\" src=\"https://refine.ams3.cdn.digitaloceanspaces.com/assets/try-it-in-your-browser.png\" /\u003e\n\u003c/a\u003e\n\n## Quick Start\n\nHere's Refine in action, the below code is an example of a simple CRUD application using Refine + React Router + Material UI:\n\n```tsx\nimport { GitHubBanner, Refine, WelcomePage } from \"@refinedev/core\"\nimport {\n  useNotificationProvider,\n  RefineThemes,\n  ErrorComponent,\n} from \"@refinedev/chakra-ui-v3\"\nimport { BrowserRouter, Routes, Route } from \"react-router\"\nimport { ChakraProvider } from \"@chakra-ui/react\"\nimport dataProvider from \"@refinedev/simple-rest\"\nimport routerProvider, {\n  UnsavedChangesNotifier,\n  DocumentTitleHandler,\n} from \"@refinedev/react-router\"\n\nfunction App() {\n  return (\n    \u003cBrowserRouter\u003e\n      \u003cGitHubBanner /\u003e\n      \u003cChakraProvider value={RefineThemes.Default}\u003e\n        \u003cRefine\n          routerProvider={routerProvider}\n          dataProvider={dataProvider(\"https://api.fake-rest.refine.dev\")}\n          notificationProvider={useNotificationProvider}\n          options={{\n            syncWithLocation: true,\n            warnWhenUnsavedChanges: true,\n          }}\n        \u003e\n          \u003cRoutes\u003e\n            \u003cRoute index element={\u003cWelcomePage /\u003e} /\u003e\n\n            \u003cRoute path=\"*\" element={\u003cErrorComponent /\u003e} /\u003e\n          \u003c/Routes\u003e\n          \u003cUnsavedChangesNotifier /\u003e\n          \u003cDocumentTitleHandler /\u003e\n        \u003c/Refine\u003e\n      \u003c/ChakraProvider\u003e\n    \u003c/BrowserRouter\u003e\n  )\n}\n\nexport default App\n\n```\n\n## Documentation\n\n- [Refer to documentation for more info about refine](https://refine.dev/docs).\n- [Step up to refine tutorials](https://refine.dev/tutorial).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fffimnsr%2Frefine-chakra-ui-v3-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fffimnsr%2Frefine-chakra-ui-v3-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fffimnsr%2Frefine-chakra-ui-v3-ts/lists"}