Skip to main content
Version: 4.xx.xx

Examples

Filters

121 examples
Access Control Casbin
Access Control is a complex topic with a variety of sophisticated solutions that provide numerous functions. This example demonstrates how to use refine and Casbin to simplify access control management throughout your application.
Ant Design
Access Control
Access Control Cerbos
Access Control is a complex topic with a variety of sophisticated solutions that provide numerous functions. This example demonstrates how to use refine and Cerbos to simplify access control management throughout your application.
Ant Design
Access Control
Calendar
In this example you can see how Ant Design's Calendar component can be used with Refine data hooks.
Ant Design
Auth Provider Auth0
Auth0 is a modular, API-first authentication and authorization service that you may use to add authentication and authorization to your apps. In this example, you'll see how to use Auth0 Login with refine.
Ant Design
Auth Provider
Auth0
Auth Provider Google Auth
You can use Google Login to control access and provide identity for your app. This example will guide you through how to connect Google Login into your project using refine.
Ant Design
Auth Provider
Google Sign In
Auth Provider Keycloak
Keycloak is a modular, API-first authentication and authorization service that you may use to add authentication and authorization to your apps. In this example, you'll see how to use Keycloak Login with refine.
Ant Design
Auth Provider
Keycloak
Auth Provider OTP Login
A one-time password(OTP) is a password that has two fundamental properties : it expires quickly, and it can’t be reused. OTPs are usually numeric or alphanumeric strings and are generated for a single login procedure. This example shows how to utilize OTP input logic with refine. You can use one-time passwords to access your application with refine AuthProvider.
Ant Design
Auth Provider
Otp Login
Authentication with Ant Design
You can create your own Authentication approach using refine. You can customize the AuthProvider methods according to your needs and control the privileges of your users. This example is a simple example of custom authentication with refine.
Ant Design
Authentication
Authentication with Chakra UI
You can create your own Authentication approach using refine. You can customize the AuthProvider methods according to your needs and control the privileges of your users. This example is a simple example of custom authentication with refine.
Chakra UI
Authentication
Vite
React Table
Authentication Example
You can create your own Authentication approach using refine. You can customize the AuthProvider methods according to your needs and control the privileges of your users. This example is a simple example of custom authentication with refine.
Headless
Authentication
Vite
React Hook Form
React Table
Authentication with Mantine
You can create your own Authentication approach using refine. You can customize the AuthProvider methods according to your needs and control the privileges of your users. This example is a simple example of custom authentication with refine.
Mantine
Authentication
Vite
React Table
Authentication with Material UI
You can create your own Authentication approach using refine. You can customize the AuthProvider methods according to your needs and control the privileges of your users. This example is a simple example of custom authentication with refine.
Material UI
Authentication
React Table
Command Palette
kbar integration for `command`/`crtrl`+`k` interface for your Refine App.
Command Palette
Kbar
Refine's useImport hook
useImport example of @refinedev/core
Headless
Refine Hooks
Refine's useModal hook
useModal example of @refinedev/core
Headless
Refine Hooks
Refine's useSelect hook
useSelect example of @refinedev/core
Headless
Refine Hooks
Custom Footer
In your refine project, you can modify the design in a few simple steps. With refine, you can completely customize your layout to your preference. This example goes through how to add a Custom Footer in your refine project.
Ant Design
Customization
Custom Login Page
With refine, you may customize your Login pages to match your own case and demands. You can also manage your Custom Login Page with refine's Auth Provider hooks. This example explains how to create a basic custom login page.
Ant Design
Customization
Custom Sider
Creating your own Sider Menu with refine is quite simple. We have customize the default refine Sider Menu in this example. You can customize the sider menu of your refine project based examine this sample.
Ant Design
Customization
Custom Theme
You can customize design and theme in your project with refine. In this example, we have created an example application by customizing the default theme of refine. You can easily customize your theme as you wish in your refine project.
Ant Design
Customization
Theme
Custom Off Layout Area
With refine, you may manage your entire project. It does not limit you in any way, giving you complete creative control. This example shows how to customize and employ refine`s Off Layout Area in detail.
Ant Design
Customization
RTL Layout
This example shows how to use refine to manage and customize the content of your Layout. You may adapt and design your Layout content as you choose by examine this example and the source code.
Ant Design
Customization
Top Menu Layout
refine enables you to customize and organize your UI as you choose thanks to its strong customization capabilities. It is shown in this case how to modify the custom Top Menu Layout component.
Ant Design
Customization
Custom Pages with Ant Design
The feature to modify your project in detail is a major benefit of using refine. In this example, you learn how to include and manage your own Pages / Routes in your project.
Ant Design
Customization
Theming
You can customize design and theme in your project with refine. In this example, we have created an example application by customizing the default theme of refine. You can easily customize your theme as you wish in your refine project.
Ant Design
Customization
Theme
Data Provider Airtable
By using refine`s full-featured Airtable Data Provider, it allows you to access your data quickly without any additional setup or coding. The following example will show you how to use your Airtable data within the refine project.
Ant Design
Data Provider
Airtable
Data Provider Appwrite
Connect your Appwrite database with refine Appwrite Data Provider and take advantage of the features that allow you to list, filter or create data in it. refine also supports Realt-time updates from Appwrite Database! This example will show you how the refine Appwrite Data Provider works and is used.
Ant Design
Data Provider
Appwrite
Data Provider Directus
refine full-featured Directus Data Provider it allows you to get to your data quickly without requiring any additional setup or code. This example will show how to utilize the refine Directus Provider in this project.
Ant Design
Community
Data Provider
Directus
Data Provider Elide
Elide Data Provider allows you call Elide backend JSON api. Elide data provider builds the queries that Elide Application can understand, so we have done the hard work for you. This example will show how to utilize the refine Elide Provider in this project.
Ant Design
Community
Data Provider
Elide
Data Provider Hasura
Any REST or GraphQL custom backend work integrated with refine. refine Hasura GraphQL Data Provider comes out-of-the-box. Thanks to refine, you can connect to your Hasura database and create special queries and use your data easily. This example shows in detail how you can use the data in your Hasura database with refine project.
Ant Design
Data Provider
Hasura
GraphQL
Live Provider
Data Provider Multiple Providers
refine's Multiple Data Provider feature allows you to connect multiple backends and manage their data with a single interface. This tutorial explains in detail how to use the Multiple Data Provider in your project.
Ant Design
Data Provider
Data Provider Nestjsx Crud
refine Nestjsx Crud Data Provider allows you to use your data on the frontend by connecting to your Nestjsx API. With refine, it perform these operations for you without having to write extra code for queries. By examining this example, you can learn how to use the Nestjsx Crud Data Provider.
Ant Design
Data Provider
NestJsx Crud
Data Provider Nhost
refine Nhost GraphQL Data Provider comes out-of-the-box. Thanks to refine, you can connect to your Nhost database and create special queries and use your data easily. This example shows in detail how you can use the data in your Nhost database with refine project.
Ant Design
Data Provider
Nhost
Auth Provider
GraphQL
Data Provider Strapi
This example demonstrates how to quickly connect your Strapi data with a full-featured refine Strapi Data Provider without having to make any additional adjustments.
Ant Design
Data Provider
Strapi
Auth Provider
Data Provider Strapi GraphQL
Strapi GraphQL is supported out-of-the-box by refine. Using your GraphQL data and creating custom queries is very easy using the refine Strapi-GraphQL provider. This example provides information on how to manage your Strapi-GraphQL data and how you can submit queries.
Ant Design
Data Provider
Strapi
GraphQL
Auth Provider
Data Provider Strapi v4
refine supports all the features that come with Strapi-v4. In this example, how to manage your data with Refine Strapi-v4 Data Provider, CRUD operations and more is explained in detail.
Ant Design
Data Provider
Strapi
Strapi V4
Auth Provider
Data Provider Supabase
Connect your Supabase database with refine Supabase Data Provider and easily manage all the features that the database offers in your interface. This example will show you how Supabase Data Provider works and is used.
Ant Design
Supabase
Data Provider
Live Provider
Auth Provider
Authentication
E2E Testing with Cypress
End-to-end testing (E2E Testing) is a method for examining whether an application's flow from start to finish is functioning as anticipated. In this example, we created the tests with the E2E test method for the components such as create, edit and list that we created on the refine side. For detailed information, you can check the live example and source code.
Testing
E2E
Cypress
Ant Design
Ant Design's useCheckboxGroup hook
The refine useCheckboxGroup hook allows you to manage your data in the form of checkboxes in an Ant Design Checkbox.Group component. In cases where users need to select more than one content, you can easily handle your transactions by using this hook. In the example below you can see how to create and manage checkboxes using the useCheckboxGroup hook.
Ant Design
Ant Design's useRadioGroup hook
You can use the refine useRadioGroup hook to manage your data in a source as an Ant Design Radio.Group component and create radio group buttons. This example simply shows how the useRadioGroup hook is used and how it works with the Ant Design Radio.Group component.
Ant Design
Ant Design's useSelect hook
When records in a resource need to be used as select options, the refine useSelect hook allows you to handle an Ant Design Select component. Also this hook includes out-of-the-box features such as fetchSize, sorting, and filtering. You may examine the code below to learn how to create and manage Select component with useSelect.
Ant Design
Form Ant Design Custom Form Validation
You can make basic validations with Ant Design Form.Item rules propertyp to the forms you have created with Refine. In addition, it allows you to make custom validations that you want or need. It is very easy to add your custom rules and validations by using the validator function within the Form.Item rules property. In the example below, a custom form validation process is explained in detail.
Form
Ant Design
Form Ant Design useDrawerForm
useDrawerForm hook allows you to access and manage the forms you've created in the Drawer Component. The code below may help you understand how to create and manage forms in a Drawer component.
Form
Ant Design
Form Ant Design useForm
refine useForm is a hook that helps you manage methods such as create, edit, and clone within the form. In this example, we constructed forms that you may use to create, edit, and clone posts using the userForm hook. You may look at the example to see how it's used.
Form
Ant Design
Form Ant Design useModalForm
With the useModalForm hook, you can manage a form inside of your modal component. It returns Ant Design Form and Modal props. You may examine the code below to learn how to create and manage forms within a modal.
Form
Ant Design
Form Ant Design useStepsForm
The useStepsForm hook is a method that allows you to split your form into multiple sections using an Ant Design Steps component, which can be used to manage your form. If your form contains multiple steps, as in the example below, it's pretty simple to manage and handle your Steps form using the refine useStepsForm hook.
Form
Ant Design
Form Chakra Ui useDrawerForm
useModalForm hook allows you to manage a form within a modal as well as a drawer. It provides some useful methods to handle the form modal or form drawer. You can view the live example or review the source code to see how it's used with Material UI.
Form
Chakra UI
Form Chakra Ui useForm
refine allows you to use all the features of React Hook Form library with @refinedev/react-hook-form adapter. Using this package, you can create your own headless forms and use all the features provided by React Hook Form in your refine project in a compatible way. You can view the live example or review the source code to see how it's used with Material UI.
Form
Chakra UI
React Hook Form
Form Chakra Ui useModalForm
useModalForm hook allows you to manage a form within a modal. It provides some useful methods to handle the form modal. You can view the live example or review the source code to see how it's used with Chakra UI.
Form
Chakra UI
Save and Continue in Forms
refine provides you with the necessary methods to add this feature. This feature is familiar to Django users.
Form
Headless
Customization
Form Mantine useDrawerForm
useModalForm hook allows you to manage a form within a modal as well as a drawer. It provides some useful methods to handle the form modal or form drawer. You can view the live example or review the source code to see how it's used with Material UI.
Form
Mantine
Form Mantine useForm
refine works integrated with useForm of @mantine/form library. Using this package, you can use all the features provided by Mantine in your refine project in a compatible way. You can view the live example or review the source code to see how it's used with Mantine.
Form
Mantine
Form Mantine useModalForm
useModalForm hook allows you to manage a form within a modal. It provides some useful methods to handle the form modal. You can view the live example or review the source code to see how it's used with Mantine.
Form
Mantine
Form Mantine useStepsForm
useStepsForm allows you to manage a form with multiple steps. It provides features such as which step is currently active, the ability to go to a specific step and validation when changing steps etc. You can view the live example or review the source code to see how it's used with Mantine.
Form
Mantine
Form Material UI useDrawerForm
useModalForm hook allows you to manage a form within a modal as well as a drawer. It provides some useful methods to handle the form modal or form drawer. You can view the live example or review the source code to see how it's used with Material UI.
Form
Material UI
React Hook Form
Form Material UI useForm
refine allows you to use all the features of React Hook Form library with @refinedev/react-hook-form adapter. Using this package, you can create your own headless forms and use all the features provided by React Hook Form in your refine project in a compatible way. You can view the live example or review the source code to see how it's used with Material UI.
Form
Material UI
React Hook Form
Form Material UI useModalForm
useModalForm hook allows you to manage a form within a modal. It provides some useful methods to handle the form modal. You can view the live example or review the source code to see how it's used with Material UI.
Form
Material UI
React Hook Form
Form Material UI useStepsForm
useStepsForm allows you to manage a form with multiple steps. It provides features such as which step is currently active, the ability to go to a specific step and validation when changing steps etc. You can view the live example or review the source code to see how it's used with Material UI.
Form
Material UI
React Hook Form
Form React Hook Form useForm
refine allows you to use all the features of React Hook Form library with @refinedev/react-hook-form adapter. Using this package, you can create your own headless forms and use all the features provided by React Hook Form in your refine project in a compatible way. For more information, you can view the live example or review the source code.
Form
Headless
React Hook Form
Form React Hook Form useModalForm
useModalForm hook allows you to manage a form within a modal. It provides some useful methods to handle the form modal. For more information, you can view the live example or review the source code.
Form
Headless
React Hook Form
Form React Hook Form useStepsForm
useStepsForm allows you to manage a form with multiple steps. It provides features such as which step is currently active, the ability to go to a specific step and validation when changing steps etc. For more information, you can view the live example or review the source code.
Form
Headless
React Hook Form
i18n Next.js
refine i18n Provider allows you to add mutiple language choices to your web application. The default language of refine is English. You can include and use your own translation in the project for different language preferences. This example shows how to use different language options and translations in practice.
Next.js
i18n
Ant Design
i18n React
refine i18n Provider allows you to add mutiple language choices to your web application. The default language of refine is English. You can include and use your own translation in the project for different language preferences. This example shows how to use different language options and translations in practice.
Ant Design
i18n
Import Export with Ant Design
refine allows you to export and import your data as CSV files. You can quickly do CSV import and export operation with refine by creating model operations on the CSV data.
Ant Design
Import
Export
Refine Hooks
Data Provider
Custom Form Inputs with Ant Design
When working with form data, refine uses Ant Design's Form component. Ant Design enables us to create our own custom inputs within the Form.Item components. As a result, we may include our own custom input fields on the form. We use the Custom Input to enter a new value for the Content field in this example. If you want to add custom inputs to your project, you can follow this example and have information about how it is used.
Ant Design
Customization
Custom Date Picker with Ant Design
While creating a record with refine, you may use the Ant Design Date Picker component directly in your refine project if you need date information. We utilized the Date Picker component to obtain 'Published At' date data while creating a post in this example. You may examine the code below to learn how to use and manage Date Picker Component in your project.
Ant Design
Customization
Refine with Javascript
Refine supports you to develop with JavaScript. All features of refine can be used with JavaScript. In our example below, we developed the tutorial with Ant Design selection entirely with JavaScript. You can learn more by following the live example.
Javascript
Ant Design
Refine's useSimpleList hook
refine's useSimpleList hook allows you to get your data straight from the API. This data is compatible with Ant Design List and can be used in it. Furthermore, this hook includes out-of-the-box features such as pagination, sorting, and filtering. In this example, how to use useSimpleList is explained in detail.
Ant Design
Refine Hooks
Live Provider Ably
The liveProvider is a powerful tool for developers who want to create an interactive app experience that can be updated in Realtime. This is an example of refine that you can use to manage your data in Realtime.
Ant Design
Live Provider
Ably
Data Provider
Multi Level Menu Multi Level Menu
The multi-level menu will provide you with the necessary infrastructure to create your resources with the priority.
Ant Design
Customization
Refine Hooks
Multi Tenancy Appwrite
In this example, we've shown how to build a Multi-Tenant app using the Appwrite database and refine in a simple manner. You can learn more by taking a look at the Live Example and reading the Appwrite Multi-Tenancy Guide.
Ant Design
Appwrite
Data Provider
Live Provider
React Router
Multi Tenancy Strapi V4
In this example, we've shown how to build a Multi-Tenant app using the Strapi-v4 and refine in a simple manner. You can learn more by taking a look at the Live Example and reading the refine Strapi-v4 Multi-Tenancy Guide.
Ant Design
Strapi
Strapi V4
Data Provider
React Router
Next.js Authentication
refine allows you to build your SSR supported web applications using Next.js. With this example, you can see how to make a simple refine app in Next.js with Authentication features.
Next.js
Router Provider
Ant Design
Authentication
Next.js Authentication with NextAuth.js
refine allows you to build your SSR supported web applications using Next.js. With this example, you can see how to make a simple refine app in Next.js and NextAuth.js with Authentication features.
Next.js
Authentication
Next Auth.js
Next.js Ant Design
refine allows you to build your SSR supported web applications using Next.js. With this example, you can see how to make a simple SSR supported CMS Admin panel using Ant Design.
Next.js
Router Provider
Ant Design
Next.js With `app/` Directory
refine allows you to use the app/ structure in your Next.js apps. To learn more about the app/ directory, check out Next.js beta docs. In this example you will find how to use the app/ directory with refine.
Next.js
Router Provider
Ant Design
Experimental
Notification Provider React Toastify
With refine Notification Provider, you can show notification messages in your application anywhere. These may be warnings or errors that advise an action and help maintain user engagement with the app's functionality. You can use any notification library and manage them with refine's useNotification hook! In this example we used the React Toastify library to show notifications.
Headless
React Hook Form
React Table
Customization
Notifications
Persist Query
You can use the persitQueryClient feature of react-query with refine. Different persisters can be used to store your client and cache to many different storage layers.
Headless
RealWorld Example
"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by Refine!
Large
Headless
React Hook Form
Customization
Data Provider
Auth Provider
Remix Ant Design
refine allows you to build your SSR supported web applications using Remix. With this example, you can see how to make a simple SSR supported CMS Admin panel using Ant Design.
Remix
Router Provider
Ant Design
Remix Authentication with remix Auth
refine allows you to build your SSR supported web applications using Remix. With this example, you can see how to authorize with Google, Auth0 and Keycloak using remix-auth.
Remix
Oauth
Google
Auth0
Keycloak
Remix Headless
refine allows you to build your SSR supported web applications using Remix. With this example, you can see how to make a simple SSR supported headless (without any style/component) CRUD App.
Remix
Router Provider
Headless
Remix MUI
refine allows you to build your SSR supported web applications using Remix. With this example, you can see how to make a simple SSR supported CMS Admin panel using MUI.
Remix
Router Provider
Material UI
Router Provider React Location
React Location is responsible for handling all the routing configurations of your application. With refine's React Location support, you can use React Location for routing in your project. The following example uses React Location for routing. You may look at the sample to see how it's done.
Ant Design
Router Provider
React Location
Search Component with Ant Design
This example explains in detail how to create a Search component using Ant Design `` in your refine project.
Ant Design
Customization
Advanced Ant Design Table
Multiple record deletion, modification, and other features can be used simultaneously in a table. It's an example of a Advanced Table made with refine's customization feature.
Table
Ant Designreact Router
Filtering on Ant Design Table
The Table Filter option allows you to apply filters to the data in your table. The example below demonstrates how you might filter and display data in your table based on certain field parameters.
Table
Filter
Ant Design
React Router
Ant Design useDeleteMany Hook
The useDeleteMany is one of refine's data hooks. It removes more than one data from the database. We used the useDeleteMany hook to remove more than one record from our table in this scenario. On your table, you may remove multiple records by selecting them and pressing delete. You can get more information by examining the example.
Table
Ant Design
Refine Hooks
React Router
Ant Design useEditableTable Hook
useEditableTable, includes all of the capabilities of useTable. It also enables you to edit your Table in addition to these advantages. It returns Ant Design Table and Form components props.
Table
Ant Design
Refine Hooks
React Router
Ant Design useTable Hook
You may use the useTable hook to process your data with features compatible with the Ant Design Table Component. You can be used as an out-of-the-box feature without needing to do extra operations for sorting, filtering, and pagination.
Table
Ant Design
Ant Design useUpdateMany Hook
useUpdateMany is one of refine's data hooks. It performs the process of updating more than one data. In this example, we used the useUpdateMany hook to edit multiple data on the table. You can edit more than one data by selecting the rows you want to edit on your table. You can get more information by examining the example.
Table
Ant Design
Refine Hooks
React Router
Advanced React Table with Chakra UI
It is an example of Chakra UI Advanced React Table created with refine's @refinedev/react-table adapter. In addition to the Chakra UI Basic React Table example, deletion editing and filtering features are used together in your table. For more information, you can view the live example or review the source code to see how it's used with Chakra UI.
Table
Chakra UI
React Table
React Router
Basic React Table with Chakra UI
refine allows you to use all the features of React Table with @refinedev/react-table adapter. In this way, you can manage your server-side data operations. By using this adapter, you can directly use all the features of React Table in your refine project. For more information, you can view the live example or review the source code to see how it's used with Chakra UI.
Table
Chakra UI
React Table
React Router
Handsontable Example
Handsontable is a full featured spreadsheet editor. You can develop applications with spreadsheet-like UX using Handsontable and Refine.
Table
Handsontable
Vite
Advanced React Table with Mantine
It is an example of Mantine Advanced React Table created with refine's @refinedev/react-table adapter. In addition to the Mantine Basic React Table example, deletion editing and filtering features are used together in your table. For more information, you can view the live example or review the source code to see how it's used with Mantine.
Table
Mantine
React Table
React Router
Basic React Table with Mantine
refine allows you to use all the features of React Table with @refinedev/react-table adapter. In this way, you can manage your server-side data operations. By using this adapter, you can directly use all the features of React Table in your refine project. For more information, you can view the live example or review the source code to see how it's used with Mantine.
Table
Mantine
React Table
React Router
Advanced Material UI Table
Advanced table examples with useDataGrid and useTable created with refine's @refinedev/react-table adapter.
Table
Material UI
React Router
Cursor Pagination
Cursor Pagination is a pagination method and Material UI supports it by default. This sample application shows how to use it.
Data Provider
Material UI
Filtering on Material UI Table
The Table Filter option allows you to apply filters to the data in your table. The example below demonstrates how you might filter and display data in your table based on certain field parameters.
Table
Filter
Material UI
React Router
Material UI's useDataGrid Hook
You may use the useDataGrid hook to process your data with features compatible with the MUI X DataGrid and DataGridPro component. You can be used as an out-of-the-box feature without needing to do extra operations for sorting, filtering, and pagination.
Table
Material UI
Material UI useDeleteMany Hook
The useDeleteMany is one of refine's data hooks. It removes more than one data from the database. We used the useDeleteMany hook to remove more than one record from our table in this scenario. On your table, you may remove multiple records by selecting them and pressing delete. You can get more information by examining the example.
Table
Material UI
Refine Hooks
React Router
Material UI useUpdateMany Hook
useUpdateMany is one of refine's data hooks. It performs the process of updating more than one data. In this example, we used the useUpdateMany hook to edit multiple data on the table. You can edit more than one data by selecting the rows you want to edit on your table. You can get more information by examining the example.
Table
Material UI
Refine Hooks
React Router
Advanced React Table
It is an example of Advanced React Table created with refine's @refinedev/react-table adapter. In addition to the Basic React Table example, deletion editing and filtering features are used together in your table. For more information, you can view the live example or review the source code.
Table
React Table
React Router
Basic React Table
refine allows you to use all the features of React Table with @refinedev/react-table adapter. In this way, you can manage your server-side data operations. By using this adapter, you can directly use all the features of React Table in your refine project.
Table
React Table
React Router
Ant Design
You can use predefined themes provided by refine. In this example, we have created an example application by using the RefineThemes from @refinedev/antd. You can easily customize your theme as you wish in your refine project.
Ant Design
Customization
Theme
Chakra UI
You can use predefined themes provided by refine. In this example, we have created an example application by using the RefineThemes from @refinedev/chakra-ui. You can easily customize your theme as you wish in your refine project.
Chakra UI
Customization
Theme
Mantine
You can use predefined themes provided by refine. In this example, we have created an example application by using the RefineThemes from @refinedev/mantine. You can easily customize your theme as you wish in your refine project.
Mantine
Customization
Theme
Material UI
You can use predefined themes provided by refine. In this example, we have created an example application by using the RefineThemes from @refinedev/mui. You can easily customize your theme as you wish in your refine project.
Material UI
Customization
Theme
Ant Design UI Tutorial
It is the example created at the end of the tutorial with Ant Design selection.
Ant Design
Tutorial
REST
Router Provider
React Router
Headless Tutorial
It is the example created at the end of the tutorial with headless selection.
Headless
Tutorial
REST
Router Provider
React Router
Material UI Tutorial
It is the example created at the end of the tutorial with Material UI selection.
Material UI
Tutorial
REST
UseModal Hook
You can use the useModal hook to manage an Ant Design Modal. This hook offers you all options for controlling an Ant Design Modal. We've demonstrated how to utilize a Modal in basic form using the useModal hook in this example.
Ant Design
Refine Hooks
Upload Ant Design Base64 Upload
refine allows you to upload your files or images in your forms as Base64 Upload. When uploading a file or an image to a source, you can complete your upload by encoding it to Base64. In this example, you'll learn how to use refine's file2Base64 function to upload a file as Base64.
Ant Design
Upload
Upload Ant Design Multipart Upload
Multipart Upload is supported by the refine. With refine, you may upload any file using Multipart Upload logic. In this example we showed you how to upload images with Multipart Upload to a resource. Check out the live example for more information.
Ant Design
Upload
Upload Chakra Ui Base64 Upload
In this example, you'll learn how to do base64 upload in refine with useForm. For more information, you can view the live example or review the source code.
Chakra UI
Upload
Upload Chakra Ui Multipart Upload
In this example, you'll learn how to do multipart upload in refine with useForm. For more information, you can view the live example or review the source code.
Chakra UI
Upload
Upload Mantine Base64 Upload
In this example, you'll learn how to do base64 upload in refine with useForm. For more information, you can view the live example or review the source code.
Mantine
Upload
Upload Mantine Multipart Upload
In this example, you'll learn how to do multipart upload in refine with useForm. For more information, you can view the live example or review the source code.
Mantine
Upload
Upload Material UI Base64 Upload
In this example, you'll learn how to do base64 upload in refine with React Hook Form. For more information, you can view the live example or review the source code.
Material UI
Upload
Upload Material UI Multipart Upload
In this example, you'll learn how to do multipart upload in refine with React Hook Form. For more information, you can view the live example or review the source code.
Material UI
Upload
Web3 Sign In with Ethereum
A web3 wallet is a type of cryptocurrency wallet that allows you to send, receive, and store digital assets without the need for a third party. This example demonstrates how to log-in to our refine project with Ethereum and connect your Metamask Web3 wallet. You can also learn how to send test ethereum with Metamask using the refine UI and how transactions are handled in this example.
Web3
Auth Provider
Ant Design