AttachmentTray

Markdown

The files in a composer, one row each, with measured progress, retry and remove.

Use it for
Several files in the composer, each with its own progress, retry and remove.
Not for
One file with a large preview. Try Attachment or PromptInput.

AttachmentTray preview

Loading example…

Installation

npm install @stackunseen/ui
import { AttachmentTray } from '@stackunseen/ui';
Styles: @stackunseen/ui/styles.css

Usage and props

Keep the list in your app. A click asks to retry, remove or open one file; the row stays until you drop it. An empty list renders nothing. At most 20 files are shown.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

items: { id, name, state, mediaType?, sizeBytes?, progress?, detail?, access?, preview? }[] · onRemove?(id) · onRetry?(id) · onOpen?(id) · label?
How state and callbacks work
All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract
items: { id, name, state, mediaType?, sizeBytes?, progress?, detail?, access?, preview? }[] · onRemove?(id) · onRetry?(id) · onOpen?(id) · label?
Keeps honest
Keep the list in your app. A click asks to retry, remove or open one file; the row stays until you drop it. An empty list renders nothing. At most 20 files are shown.
MCP
read_component "AttachmentTray" on the docs endpoint
Open the Markdown file

Keyboard and customization

Keyboard

Tab reaches Retry, Remove and Open on each row. The list itself is not a tab stop.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio