# antuikit / Attachments

> Attachments, a file upload area that lists the files as cards. Draws the add, remove and scroll glyphs of the file list from the icon pack, and merges `className` through `cn()`.

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

## Install

npx antuikit@latest init
npx antuikit@latest add attachments

## Import

import { Attachments } from "@/components/ui/attachments";

## Demos

- [Basic](https://ui.antuikit.com/embed/attachments/basic.md): Pass `placeholder` an `icon`, `title` and `description` to fill the drop area, and return `false` from `beforeUpload` to keep files in the browser.
- [File list](https://ui.antuikit.com/embed/attachments/file-list.md): Control the files with `items` and `onChange`, and each one shows as a card with its progress while uploading or its message when it fails.
- [Overflow](https://ui.antuikit.com/embed/attachments/overflow.md): Set `overflow` to `scrollX` to keep many files on one row, with arrows to scroll through them.
- [Drop placeholder](https://ui.antuikit.com/embed/attachments/drop-placeholder.md): Pass `placeholder` a function to show different text while a file is dragged over the area, when it receives `drop`.
- [Pick by type](https://ui.antuikit.com/embed/attachments/select-by-type.md): Call `select` on the ref with an `accept` list to open the file dialog for one kind of file, and cap the list with `maxCount`.
- [Disabled](https://ui.antuikit.com/embed/attachments/disabled.md): Set `disabled` to show the files without the add button or the remove buttons.
- [Chat attachments](https://ui.antuikit.com/embed/attachments/sender.md): A chat input with a paperclip button that opens a header holding the attached files.
- [File analysis](https://ui.antuikit.com/embed/attachments/analyze-files.md): A file-analysis screen where uploads show their progress and the Start analysis button waits until every file is done.
- [Support ticket](https://ui.antuikit.com/embed/attachments/support-ticket.md): A support ticket form with a subject, a category and a details field, plus screenshots attached before sending.
- [Email composer](https://ui.antuikit.com/embed/attachments/email-composer.md): An email draft with its attached files under the message, a paperclip button to add more and a Send button.

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