CRUD Components

Refine provides CRUD components that handle the layout and common functionality for data management pages. These components work consistently across all UI frameworks.

List

The List component provides a layout for displaying lists of records with automatic header, breadcrumb, and action buttons.

Basic Usage

Ant Design
Material UI
Mantine
Chakra UI

import { List, useTable } from "@refinedev/antd";
import { Table } from "antd";

export const ProductList = () => {
  const { tableProps } = useTable();

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="id" title="ID" />
        <Table.Column dataIndex="name" title="Name" />
        <Table.Column dataIndex="price" title="Price" />
      </Table>
    </List>
  );
};

import { List, useDataGrid } from "@refinedev/mui";
import { DataGrid, GridColDef } from "@mui/x-data-grid";

export const ProductList = () => {
  const { dataGridProps } = useDataGrid();

  const columns: GridColDef[] = [
    { field: "id", headerName: "ID", width: 70 },
    { field: "name", headerName: "Name", flex: 1 },
    { field: "price", headerName: "Price", width: 130 },
  ];

  return (
    <List>
      <DataGrid {...dataGridProps} columns={columns} autoHeight />
    </List>
  );
};

import { List } from "@refinedev/mantine";
import { useTable } from "@refinedev/react-table";
import { Table } from "@mantine/core";

export const ProductList = () => {
  const { getRowModel } = useTable({ columns: [] });

  return (
    <List>
      <Table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          {getRowModel().rows.map((row) => (
            <tr key={row.id}>
              <td>{row.original.id}</td>
              <td>{row.original.name}</td>
              <td>{row.original.price}</td>
            </tr>
          ))}
        </tbody>
      </Table>
    </List>
  );
};

import { List } from "@refinedev/chakra-ui";
import { useTable } from "@refinedev/react-table";
import { Table, Thead, Tbody, Tr, Th, Td } from "@chakra-ui/react";

export const ProductList = () => {
  const { getRowModel } = useTable({ columns: [] });

  return (
    <List>
      <Table>
        <Thead>
          <Tr>
            <Th>ID</Th>
            <Th>Name</Th>
            <Th>Price</Th>
          </Tr>
        </Thead>
        <Tbody>
          {getRowModel().rows.map((row) => (
            <Tr key={row.id}>
              <Td>{row.original.id}</Td>
              <Td>{row.original.name}</Td>
              <Td>{row.original.price}</Td>
            </Tr>
          ))}
        </Tbody>
      </Table>
    </List>
  );
};

Props

Prop	Type	Description
`title`	`ReactNode`	Custom page title
`resource`	`string`	Resource name (auto-detected from route)
`canCreate`	`boolean`	Show/hide create button
`createButtonProps`	`object`	Props for the create button
`breadcrumb`	`ReactNode`	Custom breadcrumb component
`headerButtons`	`ReactNode \| function`	Custom header buttons
`headerButtonProps`	`object`	Props for header button container
`wrapperProps`	`object`	Props for wrapper element
`contentProps`	`object`	Props for content element

Custom Header Buttons

import { List, ExportButton, CreateButton } from "@refinedev/antd";
import { Button, Space } from "antd";

export const ProductList = () => {
  return (
    <List
      headerButtons={({ defaultButtons }) => (
        <Space>
          {defaultButtons}
          <ExportButton />
          <Button>Custom Action</Button>
        </Space>
      )}
    >
      {/* Content */}
    </List>
  );
};

Create

The Create component provides a layout for creating new records with automatic save button and navigation.

Basic Usage

Ant Design
Material UI

import { Create, useForm } from "@refinedev/antd";
import { Form, Input, InputNumber } from "antd";

export const ProductCreate = () => {
  const { formProps, saveButtonProps } = useForm();

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item label="Name" name="name" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item label="Price" name="price" rules={[{ required: true }]}>
          <InputNumber style={{ width: "100%" }} />
        </Form.Item>
      </Form>
    </Create>
  );
};

import { Create, useForm } from "@refinedev/mui";
import { Box, TextField } from "@mui/material";

export const ProductCreate = () => {
  const {
    saveButtonProps,
    register,
    formState: { errors },
  } = useForm();

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Box component="form" sx={{ display: "flex", flexDirection: "column" }}>
        <TextField
          {...register("name", { required: "Name is required" })}
          error={!!errors.name}
          helperText={errors.name?.message}
          label="Name"
        />
        <TextField
          {...register("price", { required: "Price is required" })}
          error={!!errors.price}
          helperText={errors.price?.message}
          label="Price"
          type="number"
        />
      </Box>
    </Create>
  );
};

Props

Prop	Type	Description
`title`	`ReactNode`	Custom page title
`resource`	`string`	Resource name (auto-detected from route)
`saveButtonProps`	`object`	Props for the save button
`isLoading`	`boolean`	Loading state
`breadcrumb`	`ReactNode`	Custom breadcrumb component
`headerButtons`	`ReactNode \| function`	Custom header buttons
`footerButtons`	`ReactNode \| function`	Custom footer buttons
`goBack`	`ReactNode`	Custom back button
`wrapperProps`	`object`	Props for wrapper element
`contentProps`	`object`	Props for content element
`headerProps`	`object`	Props for header element
`footerButtonProps`	`object`	Props for footer button container

import { Create, SaveButton } from "@refinedev/antd";
import { Button, Space } from "antd";

export const ProductCreate = () => {
  const { formProps, saveButtonProps } = useForm();

  return (
    <Create
      footerButtons={({ defaultButtons }) => (
        <Space>
          <Button>Preview</Button>
          {defaultButtons}
        </Space>
      )}
    >
      {/* Form */}
    </Create>
  );
};

Edit

The Edit component provides a layout for editing existing records with automatic data fetching and save button.

Basic Usage

Ant Design
Material UI

import { Edit, useForm } from "@refinedev/antd";
import { Form, Input, InputNumber } from "antd";

export const ProductEdit = () => {
  const { formProps, saveButtonProps, queryResult } = useForm();

  return (
    <Edit saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item label="ID" name="id">
          <Input disabled />
        </Form.Item>
        <Form.Item label="Name" name="name" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        <Form.Item label="Price" name="price" rules={[{ required: true }]}>
          <InputNumber style={{ width: "100%" }} />
        </Form.Item>
      </Form>
    </Edit>
  );
};

import { Edit, useForm } from "@refinedev/mui";
import { Box, TextField } from "@mui/material";

export const ProductEdit = () => {
  const {
    saveButtonProps,
    register,
    formState: { errors },
  } = useForm();

  return (
    <Edit saveButtonProps={saveButtonProps}>
      <Box component="form" sx={{ display: "flex", flexDirection: "column" }}>
        <TextField {...register("id")} disabled label="ID" />
        <TextField
          {...register("name", { required: "Name is required" })}
          error={!!errors.name}
          helperText={errors.name?.message}
          label="Name"
        />
      </Box>
    </Edit>
  );
};

Props

Same as Create component, plus:

Prop	Type	Description
`recordItemId`	`string \| number`	Record ID to edit
`canDelete`	`boolean`	Show/hide delete button
`deleteButtonProps`	`object`	Props for the delete button

With Delete Button

import { Edit, useForm, DeleteButton } from "@refinedev/antd";

export const ProductEdit = () => {
  const { formProps, saveButtonProps, queryResult } = useForm();
  const id = queryResult?.data?.data?.id;

  return (
    <Edit
      saveButtonProps={saveButtonProps}
      headerButtons={({ defaultButtons }) => (
        <>
          {defaultButtons}
          <DeleteButton recordItemId={id} />
        </>
      )}
    >
      {/* Form */}
    </Edit>
  );
};

Show

The Show component provides a layout for displaying a single record in read-only mode.

Basic Usage

Ant Design
Material UI

import { Show, TextField, NumberField } from "@refinedev/antd";
import { useShow } from "@refinedev/core";
import { Typography } from "antd";

const { Title } = Typography;

export const ProductShow = () => {
  const { queryResult } = useShow();
  const { data, isLoading } = queryResult;
  const record = data?.data;

  return (
    <Show isLoading={isLoading}>
      <Title level={5}>ID</Title>
      <TextField value={record?.id} />

      <Title level={5}>Name</Title>
      <TextField value={record?.name} />

      <Title level={5}>Price</Title>
      <NumberField
        value={record?.price}
        options={{ style: "currency", currency: "USD" }}
      />
    </Show>
  );
};

import { Show, TextField, NumberField } from "@refinedev/mui";
import { useShow } from "@refinedev/core";
import { Typography, Stack } from "@mui/material";

export const ProductShow = () => {
  const { queryResult } = useShow();
  const { data, isLoading } = queryResult;
  const record = data?.data;

  return (
    <Show isLoading={isLoading}>
      <Stack gap={1}>
        <Typography variant="body1" fontWeight="bold">ID</Typography>
        <TextField value={record?.id} />

        <Typography variant="body1" fontWeight="bold">Name</Typography>
        <TextField value={record?.name} />

        <Typography variant="body1" fontWeight="bold">Price</Typography>
        <NumberField
          value={record?.price}
          options={{ style: "currency", currency: "USD" }}
        />
      </Stack>
    </Show>
  );
};

Props

Prop	Type	Description
`title`	`ReactNode`	Custom page title
`resource`	`string`	Resource name (auto-detected from route)
`recordItemId`	`string \| number`	Record ID to show
`isLoading`	`boolean`	Loading state
`canEdit`	`boolean`	Show/hide edit button
`canDelete`	`boolean`	Show/hide delete button
`breadcrumb`	`ReactNode`	Custom breadcrumb component
`headerButtons`	`ReactNode \| function`	Custom header buttons
`footerButtons`	`ReactNode \| function`	Custom footer buttons
`goBack`	`ReactNode`	Custom back button

With Action Buttons

import { Show, EditButton, DeleteButton, RefreshButton } from "@refinedev/antd";
import { Space } from "antd";

export const ProductShow = () => {
  const { queryResult } = useShow();
  const id = queryResult?.data?.data?.id;

  return (
    <Show
      headerButtons={({ defaultButtons, editButtonProps, deleteButtonProps }) => (
        <Space>
          {defaultButtons}
          <EditButton {...editButtonProps} />
          <DeleteButton {...deleteButtonProps} />
          <RefreshButton />
        </Space>
      )}
    >
      {/* Content */}
    </Show>
  );
};

Advanced Features

Use modal or drawer for create/edit operations:

Modal (Ant Design)
Drawer (Ant Design)

import { useModalForm, CreateButton } from "@refinedev/antd";
import { Modal, Form, Input } from "antd";

export const ProductList = () => {
  const { modalProps, formProps, show } = useModalForm({
    action: "create",
  });

  return (
    <>
      <CreateButton onClick={() => show()} />
      
      <Modal {...modalProps}>
        <Form {...formProps} layout="vertical">
          <Form.Item label="Name" name="name" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

import { useDrawerForm, EditButton } from "@refinedev/antd";
import { Drawer, Form, Input } from "antd";

export const ProductList = () => {
  const { drawerProps, formProps, show } = useDrawerForm({
    action: "edit",
  });

  return (
    <>
      <EditButton onClick={() => show("1")} />
      
      <Drawer {...drawerProps}>
        <Form {...formProps} layout="vertical">
          <Form.Item label="Name" name="name" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
        </Form>
      </Drawer>
    </>
  );
};

Auto-Save Forms

Enable auto-save for forms:

import { Edit, useForm, AutoSaveIndicator } from "@refinedev/antd";
import { Form, Input } from "antd";

export const ProductEdit = () => {
  const { formProps, autoSaveProps } = useForm({
    autoSave: {
      enabled: true,
      debounce: 2000, // Save after 2 seconds of inactivity
    },
  });

  return (
    <Edit
      headerButtons={() => <AutoSaveIndicator {...autoSaveProps} />}
    >
      <Form {...formProps} layout="vertical">
        <Form.Item label="Name" name="name">
          <Input />
        </Form.Item>
      </Form>
    </Edit>
  );
};

Best Practices

Consistent Layouts: Use CRUD components for consistent UI
Loading States: Always show loading indicators
Error Handling: Display validation errors clearly
Breadcrumbs: Help users navigate back
Action Buttons: Provide clear calls-to-action
Responsive Design: Test on mobile devices

Next Steps

Field Components

Display data with field components

Button Components

Add action buttons

Forms

Learn about form hooks

Tables

Work with table data

Overview

Supported UI Frameworks

Components

CRUD Components

List

Basic Usage

Props

Custom Header Buttons

Create

Basic Usage

Props

Custom Footer Buttons

Edit

Basic Usage

Props

With Delete Button

Show

Basic Usage

Props

With Action Buttons

Advanced Features

Auto-Save Forms

Best Practices

Next Steps

Field Components

Button Components

Forms

Tables

Build docs developers (and LLMs) love

Overview

Supported UI Frameworks

Components

​List

​Basic Usage

​Props

​Custom Header Buttons

​Create

​Basic Usage

​Props

​Custom Footer Buttons

​Edit

​Basic Usage

​Props

​With Delete Button

​Show

​Basic Usage

​Props

​With Action Buttons

​Advanced Features

​Modal/Drawer Forms

​Auto-Save Forms

​Best Practices

​Next Steps

Field Components

Button Components

Forms

Tables

Build docs developers (and LLMs) love

List

Basic Usage

Props

Custom Header Buttons

Create

Basic Usage

Props

Custom Footer Buttons

Edit

Basic Usage

Props

With Delete Button

Show

Basic Usage

Props

With Action Buttons

Advanced Features

Modal/Drawer Forms

Auto-Save Forms

Best Practices

Next Steps