Attachment

Displays a file or image attachment with media, metadata, upload state, and actions.

Powered by

Shadcn UI

Installation

npx shadcn@latest add @redpanda/attachment

pnpm dlx shadcn@latest add @redpanda/attachment

yarn dlx shadcn@latest add @redpanda/attachment

bunx shadcn@latest add @redpanda/attachment

nubx shadcn@latest add @redpanda/attachment

aube dlx shadcn@latest add @redpanda/attachment

Usage

Use Attachment for files and images in chat composers, message threads, and upload lists.

import {
  Attachment,
  AttachmentAction,
  AttachmentActions,
  AttachmentContent,
  AttachmentDescription,
  AttachmentMedia,
  AttachmentTitle,
  AttachmentTrigger,
} from "@/components/redpanda-ui/components/attachment"

<Attachment state="uploading">
  <AttachmentMedia><FileTextIcon /></AttachmentMedia>
  <AttachmentContent>
    <AttachmentTitle>report.pdf</AttachmentTitle>
    <AttachmentDescription>Uploading · 64%</AttachmentDescription>
  </AttachmentContent>
  <AttachmentActions>
    <AttachmentAction aria-label="Remove report.pdf" onClick={() => undefined}>
      <XIcon />
    </AttachmentAction>
  </AttachmentActions>
</Attachment>

Anatomy

Attachment
├── AttachmentMedia
├── AttachmentContent
│   ├── AttachmentTitle
│   └── AttachmentDescription
├── AttachmentActions
│   └── AttachmentAction
└── AttachmentTrigger

AttachmentGroup
└── Attachment…

States and variants

• state: idle, uploading, processing, error, or done
• size: xs, sm, or md
• orientation: horizontal or vertical
• AttachmentMedia variant: icon or image

uploading and processing shimmer the title. error changes the visual treatment, so include a readable failure reason in AttachmentDescription rather than relying on color alone.

Interaction patterns

Use AttachmentTrigger to make the card actionable while keeping AttachmentAction controls as separate sibling buttons. Label every icon-only action and overlay trigger.

<Attachment>
  {/* media, content, and actions */}
  <AttachmentTrigger render={<a aria-label="Open report.pdf" href={fileUrl} />}>
    Open report.pdf
  </AttachmentTrigger>
</Attachment>

For a scrollable AttachmentGroup, add tabIndex={0}, role="region", and an aria-label so keyboard users can reach and identify it. The component provides a visible focus ring, and the full scroll-fade utility family ships with the registry theme.

For agent-generated files, describe the artifact as generated, show a readable processing or failure state, and keep card navigation separate from actions such as copy or remove. File URLs remain application data: validate allowed protocols and hosts before passing a server-provided URL to href or an image source.

Credits

• Based on the Shadcn UI Attachment component.