# antuikit / Transfer

> Transfer, with every icon drawn from the kit's icon pack: the move arrows (labeled ones too), the `oneWay` remove buttons, the search box and the page arrows.

Docs: https://antuikit.com/docs/components/transfer

## Install

npx antuikit@latest init
npx antuikit@latest add transfer

## Import

import { Transfer } from "@/components/ui/transfer";

## Demos

- [Basic](https://ui.antuikit.com/embed/transfer/basic.md): Pass `dataSource`, `targetKeys` and `onChange` to move items between two panels, and store the keys `onChange` hands you.
- [One way](https://ui.antuikit.com/embed/transfer/one-way.md): Set `oneWay` so items only move to the right, where each one gets its own remove button instead of a back arrow.
- [Search](https://ui.antuikit.com/embed/transfer/search.md): Set `showSearch` to filter each panel, and `filterOption` to match fields the row does not show, like typing "write" to find read-write scopes.
- [Pagination](https://ui.antuikit.com/embed/transfer/pagination.md): Set `pagination` to page a long list, like a directory of 200 contacts shown 10 at a time with search.
- [Custom rows](https://ui.antuikit.com/embed/transfer/custom-render.md): Return a node from `render` to draw each row your way, like an avatar with a name and an email address.
- [Custom action buttons](https://ui.antuikit.com/embed/transfer/element-actions.md): Pass `actions` your own Button elements, like an Assign button that shows `loading` while it saves, and Transfer still disables each one until something is selected.
- [Action labels](https://ui.antuikit.com/embed/transfer/action-labels.md): Pass `actions` two strings to label the move buttons with words instead of arrows, like Subscribe and Remove.
- [Panel footers](https://ui.antuikit.com/embed/transfer/advanced.md): Pass `footer` a function to add content under each panel, using `info.direction` to tell the left one from the right.
- [Table body](https://ui.antuikit.com/embed/transfer/table-transfer.md): Pass `children` a render function to draw the panel body yourself, like a Table whose row selection drives Transfer's.
- [Tree body](https://ui.antuikit.com/embed/transfer/tree-transfer.md): Return a checkable Tree from `children` for the left panel and `undefined` for the right, which keeps the default list.
- [Status](https://ui.antuikit.com/embed/transfer/status.md): Set `status` to `error` or `warning` to color both panels' borders when the selection needs attention.
- [Role assignment](https://ui.antuikit.com/embed/transfer/role-assignment.md): An editors card that adds people through a searchable one-way Transfer, with a count in the footer and a Save button.
- [Column picker](https://ui.antuikit.com/embed/transfer/column-picker.md): An orders card that shows or hides table columns with a Transfer, and the table below updates as columns move.
- [Warehouse stock transfer](https://ui.antuikit.com/embed/transfer/stock-transfer.md): A stock transfer between two warehouses, with searchable SKUs, a low-stock tag and a running unit count above the submit button.
- [Class enrollment](https://ui.antuikit.com/embed/transfer/class-enrollment.md): A lab section that moves students off a waitlist, turns red when it goes over its seat limit and blocks confirming until it fits.
- [Hotel sales channels](https://ui.antuikit.com/embed/transfer/sales-channels.md): A hotel's room types split per sales channel, switched with a Segmented, with one room type disabled while it is under renovation.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/transfer`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Transfer` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.