# antuikit / FileCard

> FileCard, a file shown as a card or a media preview, with `FileCard.List` attached, whose remove and scroll glyphs come from the icon pack.

Docs: https://antuikit.com/docs/components/file-card

## Install

npx antuikit@latest init
npx antuikit@latest add file-card

## Import

import { FileCard } from "@/components/ui/file-card";

## Demos

- [Basic](https://ui.antuikit.com/embed/file-card/basic.md): Pass `name` and `byte` to show a file with its size, under an icon that follows the extension, like a PDF, a spreadsheet or an archive.
- [Image](https://ui.antuikit.com/embed/file-card/image.md): Give an image file a `src` to show the picture itself, which opens a full-size preview on click.
- [Image as a file](https://ui.antuikit.com/embed/file-card/as-file.md): Set `type` to `file` to show an image as a file card with its name and size instead of the picture.
- [Loading](https://ui.antuikit.com/embed/file-card/loading.md): Set `loading` while an image uploads to show a placeholder with its progress, then the picture once it is ready.
- [Size](https://ui.antuikit.com/embed/file-card/size.md): Set `size` to `small` for a shorter card that fits beside a chat message.
- [Description](https://ui.antuikit.com/embed/file-card/description.md): Pass `description` text, or a function that receives the formatted size, to replace the line under the name.
- [Icon](https://ui.antuikit.com/embed/file-card/icon.md): Pass `icon` a preset name like `pdf` to pick the file glyph yourself, or any node to draw your own.
- [Mask](https://ui.antuikit.com/embed/file-card/mask.md): Pass `mask`, a node or a function of the file, to cover the card on hover with actions like preview and download.
- [List](https://ui.antuikit.com/embed/file-card/list.md): Use `FileCard.List` to lay out several files in a row, and set `removable` with `onRemove` to let people take one out.
- [Overflow](https://ui.antuikit.com/embed/file-card/overflow.md): Set `overflow` to `scrollX` to keep a long list on one row, with arrows to scroll through it.
- [Download button](https://ui.antuikit.com/embed/file-card/download.md): File cards whose `description` function puts the size beside a download button that works without opening the file.
- [Files in a chat](https://ui.antuikit.com/embed/file-card/chat-files.md): A chat where the user sends two spreadsheets and the assistant answers with a summary and a report to open.
- [Shared files](https://ui.antuikit.com/embed/file-card/shared-files.md): A project card listing the documents and images its members shared, each with its size and who uploaded it.
- [Generated images](https://ui.antuikit.com/embed/file-card/generated-images.md): An image assistant that answers a prompt with four generated pictures, plus buttons to regenerate or download them.

## 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/file-card`, 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-*)`.
- `FileCard` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.