# Shadcn Attachment

> Open-source shadcn attachment components for chat composers, upload states, and file previews.

- Type: shadcn/ui component, free
- Page: https://web.dev.reui.io/components/attachment
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/attachment.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/attachment.md
- MCP: `get_component("attachment")`, then `get_examples("attachment")`
- Examples: 6

## When to use

- Files carried by a chat turn, as chips in a composer tray or cards in an assistant reply
- Upload queues and pickers where each file reads as idle, uploading, processing, failed or done
- Rows of image thumbnails or file chips that scroll sideways on one line instead of wrapping

## When not to use

- A drop zone that takes files dragged in from the desktop: use [File Upload](https://web.dev.reui.io/components/file-upload.md) (`get_component("file-upload")`)
- A colored format badge that labels a document by its extension, such as PDF: use [File Type](https://web.dev.reui.io/components/file-type.md) (`get_component("file-type")`)
- An upload list where each row needs a bar filling toward 100 percent: use [Progress](https://web.dev.reui.io/components/progress.md) (`get_component("progress")`)

## Agent notes

- `Attachment` uploads nothing and only styles the `state` you pass, so set `state` from your own transfer code
- The radix `Button` behind `AttachmentAction` sets no `type`, so pass `type` button inside a `form` or it submits

## Examples

- [Assistant Reply](https://web.dev.reui.io/components/attachment/c-attachment-1.md): Single file attachment in an assistant reply. Best for a full width report card under a reply paragraph, with type and size and a secondary download button.
- [Composer Tray](https://web.dev.reui.io/components/attachment/c-attachment-2.md): Composer tray with removable attachments. Best for a chat textarea topped by xs chips that scroll sideways, a paperclip that adds files and a live attached count.
- [Image Strip](https://web.dev.reui.io/components/attachment/c-attachment-3.md): Image thumbnails in a snapping strip. Best for vertical image cards whose full card button marks one as pressed and prints its name and dimensions below.
- [Three Sizes](https://web.dev.reui.io/components/attachment/c-attachment-4.md): Three sizes carrying three levels of an answer. Best for default, sm and xs cards stacked under text labels to rank a deliverable, its working files and cited snippets.
- [Upload Queue](https://web.dev.reui.io/components/attachment/c-attachment-5.md): Upload queue across all five states. Best for each of the 5 states on its own row, with a spinner while uploading, a retry on the failure and cancel or remove labels by state.
- [File Picker](https://web.dev.reui.io/components/attachment/c-attachment-6.md): File picker that fills an attachment tray. Best for a dashed idle card that opens the system dialog, then lists picks as sm rows with image previews, sizes and limit errors.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.