Transfer is installed into your project as a file you own. It takes the same props as Ant Design's Transfer, with its generic item type. The kit adds one default: the move buttons use arrows from your icon pack, until you pass actions or operations yourself. Those rows are marked antuikit in the API table.
Install
npx antuikit@latest init
npx antuikit@latest add transfer
The first command sets up your project once, with AntuikitProvider and the theme tokens. The second adds Transfer.
Import
Import from @/components/ui/transfer, not from antd. The file lives in your project, so the path is a project path.
import { Transfer } from "@/components/ui/transfer"
The axes
The props that take a fixed set of values. The Design tab's Figma properties follow them. Transfer has no variant or size.
status takes error or warning, which recolor the panel borders. Its other values change nothing here.
showSearch and pagination take true or an options object: { placeholder, defaultValue } for search, { pageSize, simple, showSizeChanger, showLessItems } for pages.
Flags
Three booleans, and each removes something as well as adding something.
disabled (default false) turns off both panels, both buttons, both search boxes and the pager. An item's own disabled is narrower: the item is left out of select-all, the menu and onChange's moveKeys, and stays visible.
showSelectAll (default true) draws the header checkbox and the menu beside it. Turn it off when a custom body has its own, like a Table. The checkbox also goes, leaving only the menu, with pagination and on the right panel under oneWay.
oneWay (default false) removes the left arrow and gives each row on the right a remove button. Under oneWay, pass one action. A second element in actions renders a button that moves nothing.
Slots
Where your own markup goes. Use these before a descendant selector. Three take a node, and two are functions that receive the panel they draw and return one.
titles takes [source, target] as nodes, so a count or a Tag can sit in a title.
actions takes [toRight, toLeft]. A string becomes a labeled button. An element is used as the button itself, so pass a Button. Your disabled can only add to Transfer's, and your onClick runs before the move.
selectionsIcon is the header menu's trigger. The default cannot take focus, so pass a focusable element to put the menu in keyboard reach.
footer is a function. Its second argument, { direction }, tells you which side you are drawing.
children draws the panel body. It receives direction, filteredItems, selectedKeys and the select callbacks. Return undefined for one side to keep the default list. It replaces the body only, not the search box above it.
Events
Transfer moves nothing by itself, so onChange is not optional.
onChange gives you (targetKeys, direction, moveKeys) and waits. Store targetKeys, or the buttons light up and nothing moves.
onSelectChange gives the selection as two arrays, one per panel. Pair it with selectedKeys only when you need to control the selection. Otherwise Transfer tracks it.
onSearch fires as the reader types, after filtering is done. Use it for analytics or to fetch a wider dataSource.
onScroll fires on a panel body's scroll, with the direction, which is where an infinite list loads its next page.
filterOption is not an event. It runs during render, once per item, and its answer is the filter. It wins over render's value when both are set.
Styling
classNames and styles take the same keys, one per part. Use them before a descendant selector: a part with a key stays stable across versions.
1
<Transfer
2
classNames={{
3
root: "…",
4
section: "…",
5
header: "…",
6
title: "…",
7
body: "…",
8
list: "…",
9
item: "…",
10
itemIcon: "…",
11
itemContent: "…",
12
footer: "…",
13
actions: "…",
14
source: "…",
15
target: "…",
16
}}
17
/>
A utility class on one of these keys wins without !important. Setting a component token's CSS variable on the root has no effect, so change the token in your theme or style the part instead.
API Reference
Transfer
Transfer's props. Rows marked antuikit in the Version column are added by the kit.