Examples | refine

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 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 Antd 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 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 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

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 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

Filters