Attachment
A file chip with an upload lifecycle for chat composers.
Overview
A file chip for composers and messages: media (icon or thumbnail), title and
description, actions, and an upload lifecycle driven by data-state — idle
(dashed frame), uploading/processing (pulsing title), error (error tone) and
done. AttachmentGroup lays chips in a snapping horizontal strip;
AttachmentTrigger stretches a press target over the whole chip.
'/%3E%3C/svg%3E)
$ npx morpha-ui add attachmentInstallation
Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add attachment. In the meantime, since this is the base shadcn component, you
can also add it directly:
npx shadcn@latest add attachmentAPI Reference
Prop
Type
Accessibility
- Give icon-only actions (remove, retry) an
aria-label. - Announce state changes (upload finished/failed) — the visual state alone isn't announced.
AttachmentTriggeroverlays the chip; actions stay independently clickable above it.