Attachments is installed into your project as a file you own. It takes the same props as Ant Design X's Attachments, which include every prop of Ant Design's Upload, and forwards a ref, marked antuikit in the API table. The add, remove and scroll buttons draw their glyphs from your icon pack.
Install
npx antuikit@latest init
npx antuikit@latest add attachments
The first command installs AntuikitProvider and the theme tokens, the second adds this component.
Import
From @/components/ui/attachments, never from @ant-design/x. The file lives in your project, so the import is a path, not a package. The Attachment item type comes from the same file.
import { Attachments, type Attachment } from "@/components/ui/attachments"
Files and uploading
Attachments is an Upload that shows its files as cards. Decide first where a picked file goes.
beforeUpload returning false keeps the file in the browser. It joins the list and you send it later, with the message.
action sends each file to a URL as soon as it is picked, and the card shows the progress.
customRequest replaces the request with your own, for a signed URL or your own client.
With none of the three, each picked file is posted to the current page's URL. Pass one of them.
Control the list with items and onChange. A card reads its look from the item: status: "uploading" with a percent shows progress, status: "error" shows the response string as the message, and an image url becomes a thumbnail.
placeholder fills the area shown while the list is empty, with an icon, title and description, or your own element. It is also what shows while a file is dragged over.
Pass a function to placeholder to tell the two apart: it is called with "inline" for the empty state and "drop" for the drag overlay.
getDropContainer picks where a drop is accepted. Left unset it is the component. Return document.body to take a file dropped anywhere on the page.
Your own trigger
Pass a single element as children, like a paperclip button, and Attachments draws only that element and the drop overlay, with no list. To open the picker from a button that lives somewhere else, call ref.current.select(). To add a file you already have, like one pasted into a Sender, call ref.current.upload(file).
Limits and flags
maxCount caps the list. The add button disappears once it is full.
disabled shows the files with no add or remove buttons, and dims the empty area.
overflow decides what a long list does: wrap (what you get when it is unset), scrollX with arrow buttons, or scrollY.
accept and multiple set up the file picker the way they do on Upload.
Events
onChange fires for every add, status change and removal, with { file, fileList }.
onRemove fires when a remove button is clicked. Return false, or a promise of it, to keep the file.
beforeUpload runs once per file before it is sent.
Styling
classNames and styles take one key per part. card, file, icon, name and description reach every file card at once.
1
<Attachments
2
classNames={{
3
root: "…",
4
list: "…",
5
card: "…",
6
file: "…",
7
icon: "…",
8
name: "…",
9
description: "…",
10
placeholder: "…",
11
upload: "…",
12
}}
13
/>
API Reference
Attachments
Attachments' props. It also takes every prop of Upload, and the ones that matter most are listed. Rows marked antuikit in the Version column are added by the kit.