---
title: Attachment
description: Displays a file or image attachment with media, metadata, upload state, and actions.
icon: paperclip
author:
  name: shadcn
  url: https://github.com/shadcn
sidebar:
  badge: New
---

<ComponentPreview name="attachment-demo" />

<PoweredBy packages={[
  { name: 'Shadcn UI', url: 'https://ui.shadcn.com/docs/components/base/attachment' },
]} />

## Installation

```package-install
npx shadcn@latest add @redpanda/attachment
```

## Usage

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

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

```tsx
<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

```text
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.

```tsx
<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](https://ui.shadcn.com/docs/components/base/attachment) component.