UI Skillbook
2

Attachment

A card for a file or image attached to a message or draft, with upload states and actions.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-attachment and follow the Siteplane Attachment skill it prints for this task.

Paste this into your agent.

Attachment shows files in a chat composer, in a sent message or in an upload row, including progress, failures and retry. Cards can sit in a horizontally scrolling group and open a preview.

Install

bashnpx shadcn@4.18.0 add @siteplane/attachment

Import it from @/siteplane/components/attachment. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs File Type Icon: Use File Type Icon on its own for a simple list row without upload state or actions.
  • vs Prompt Input: Inside Prompt Input, put small attachment cards in PromptInputAttachments.

Rules

  • Set state (idle, uploading, processing, error, done) from your upload code, and say the state in AttachmentDescription too.
  • Give every AttachmentAction and AttachmentTrigger an aria-label that includes the file name.
  • Use orientation="vertical" with AttachmentMedia variant="image" for image thumbnails and size="sm" inside fields.
  • Wrap rows in AttachmentGroup with a label and stable keys, and move focus elsewhere before removing a card.
  • The card uploads nothing; your app starts, retries and cancels uploads.

Reference

  • Attachment docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Chat & AI. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-attachment

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Form Field Validation Timingby UI Skillbook

Validate at the right moment — not on every keystroke, not only on submit.

Forms

Siteplane Autocompleteby UI Skillbook

A text input that suggests completions while still accepting whatever the person types.

Siteplane UI

Siteplane Calendarby UI Skillbook

An inline month grid for picking a single date, several dates or a range, with unavailable-day rules.

Siteplane UI

Siteplane Comboboxby UI Skillbook

A searchable picker that filters known options as you type, single or multi-select with chips.

Siteplane UI

Back to Siteplane UI