FileCard is installed into your project as a file you own. It takes the same props as Ant Design X's FileCard, and draws the file icons and the list's remove and scroll glyphs from your icon pack. The rows that changed are marked antuikit in the API table. FileCard.List comes attached.
Install
npx antuikit@latest init
npx antuikit@latest add file-card
The first command installs AntuikitProvider and the theme tokens, the second adds this component and the @ant-design/x package it builds on.
Import
From @/components/ui/file-card, never from @ant-design/x. The file lives in your project, so the import is a path, not a package.
import { FileCard, type FileCardProps } from "@/components/ui/file-card"
File, image, audio and video
name is the only required prop, and its extension decides what the card renders. type overrides it.
A file card shows an icon, the name and a line under it. The line is the formatted byte size unless you pass description.
An image extension (png, jpg, webp, svg and the like) renders an Image preview of src, which opens larger on click. loading covers it with a spinner while it uploads.
An audio or video extension renders the browser's own player for src, with its controls.
A file card picks its icon from the extension: PDF, Word, Excel, PowerPoint, archives, Markdown, code files and a default for the rest. Each draws your icon pack's file glyph in its own color, so a PDF is red and a Word file blue. Pass a preset name to icon to choose one yourself, or a node to replace it.
Description and mask
description replaces the size line. As a function it receives the formatted size and the file info, so you can write “482 KB, uploaded” without formatting bytes yourself.
mask covers a file card on hover, for an action like download. On an image, set imageProps.preview.mask instead.
1
<FileCard
2
name="oblomov.pdf"
3
byte={482_304}
4
description={({ size }) => `${size}, uploaded`}
5
/>
FileCard.List
A row of cards from one items array, each with the props of a FileCard. removable adds a remove button to each card, and onRemove tells you which file to drop from your state.
overflow sets what happens when the cards do not fit: wrap (the default) wraps to new rows, scrollX scrolls one row with arrow buttons, and scrollY scrolls in a short fixed height.
extension places a node after the last card, like an add button.
FileCardListGlyphs is the kit's own export. It draws the icon pack's glyphs into the remove, scroll and add buttons of any file list inside it. FileCard.List and the kit's Attachments already use it.