Skip to main content

Version: 4.xx.xx

Examples

Filters

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

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.

In this example you can see how Ant Design's Calendar component can be used with Refine data hooks.

Audit Log with Antd

refine allows you to track changes and who made them in your data by sending a new log event record whenever a new record is created, updated or deleted. This example demonstrates creating an audit log with Ant Design.

Audit Log Provider

Audit Log with Headless

refine allows you to track changes and who made them in your data by sending a new log event record whenever a new record is created, updated or deleted. This example demonstrates how to create an audit log provider.

Audit Log Provider

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.

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.

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.

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.

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.

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.

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.

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.

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.

Build Systems Monorepo with Lerna

Lerna is a fast, modern build system for managing and publishing multiple JavaScript/TypeScript packages from the same repository. In this example, you'll see how to use Lerna to setup a monorepo with refine.

Build Systems Using Nx

Nx is a powerful open-source build system that provides tools and techniques for enhancing developer productivity, optimizing CI performance, and maintaining code quality. In this example, you'll see how to use Nx with refine.

Build Systems Monorepo with Turbo

Turborepo is a high-performance build system for JavaScript and TypeScript codebases. In this example, you'll see how to use Turbo to setup a monorepo with refine.

Command Palette

kbar integration for `command`/`crtrl`+`k` interface for your refine App.

Command Palette

Refine's useImport hook

useImport example of @refinedev/core

Refine's useInfiniteList hook

useInfiniteList example of @refinedev/core

Refine's useMenu hook

useMenu example of @refinedev/core

Refine's useModal hook

useModal example of @refinedev/core

Refine's useSelect hook

useSelect example of @refinedev/core

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.

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.

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.

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.

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.

Custom Theme Ant Design

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.

Custom Theme Chakra UI

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.

Custom Theme Mantine

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.

Custom Theme Material UI

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Material UI useAutocomplete hook

This example shows how to use the useAutocomplete hook.

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'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'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's useSelect hook with infinite list

This example shows how to use the useSelect hook with an infinite list.

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

React Hook Form

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.

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.

React Hook Form

Save and Continue in Forms

refine provides you with the necessary methods to add this feature. This feature is familiar to Django users.

This example shows how to use the useForm hook.

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

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.

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.

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.

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.

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.

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.

React Hook Form

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.

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.

Import / Export CSV 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.

CSV Import / Export

Import / Export CSV with Mantine

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.

CSV Import / Export

Import / Export CSV with Material UI

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.

CSV Import / Export

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.

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.

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.

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.

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.

Meta Properties Example

In this example, we will show you how to use the meta property to pass additional parameters to the data provider methods. It contains the following features:

Multi Level Menu Multi Level Menu

The multi-level menu will provide you with the necessary infrastructure to create your resources with the priority.

Mutation mode determines which mode the mutation runs with. Mutations can run under three different modes: pessimistic, optimistic and undoable. You can experience them with this app.

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 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 Next.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 SSR supported CMS Admin panel.

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 app docs. In this example you will find how to use the app/ directory with refine.

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.

Notification Provider

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.

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

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

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 Material UI.

Search Component with Ant Design

This example explains in detail how to create a Search component using Ant Design `` in your refine project.

Storybook with Ant Design

Storybook with Ant Design is an example application.

Storybook with Material UI

Storybook with Material UI is an example application.

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.

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.

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.

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.

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.

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.

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.

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.

Handsontable Example

Handsontable is a full featured spreadsheet editor. You can develop applications with spreadsheet-like UX using Handsontable and Refine.

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.

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.

Advanced Material UI Table

Advanced table examples with useDataGrid and useTable created with refine's @refinedev/react-table adapter.

Cursor Pagination

Cursor Pagination is a pagination method and Material UI supports it by default. This sample application shows how to use it.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Ant Design Tutorial

It is the example created at the end of the tutorial with Ant Design selection.

Chakra UI Tutorial

It is the example created at the end of the tutorial with Chakra UI selection.

Headless Tutorial

It is the example created at the end of the tutorial with headless selection.

Mantine Tutorial

It is the example created at the end of the tutorial with Mantine selection.

Material UI Tutorial

It is the example created at the end of the tutorial with Material UI selection.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.