# Shadcn Composer Tray

> Composer tray with removable attachments

- Type: example, free and open source (MIT)
- Component: [Attachment](https://web.dev.reui.io/components/attachment.md)
- Page: https://web.dev.reui.io/components/attachment/c-attachment-2
- 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_example("c-attachment-2")`
- Registry item: https://web.dev.reui.io/r/styles/base-nova/c-attachment-2.json
- Uses: Attachment, Field, Input Group

## Best for

A chat textarea topped by xs chips that scroll sideways, a paperclip that adds files and a live attached count

## Agent notes

- The paperclip appends the next entry of `FILES` rather than opening a file dialog; wire a real picker as in `c-attachment-6`
- The `form` `onSubmit` only calls `preventDefault`, so Send posts nothing until you add your handler

## When not to use

- Picked files from the system dialog, checked against count, size and type limits: use [File Picker](https://web.dev.reui.io/components/attachment/c-attachment-6.md) (`get_example("c-attachment-6")`)

## Install

```bash
npx shadcn@latest add @reui/c-attachment-2
```

## About Shadcn Attachment

### 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

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.