Shadcn Attachment

An attachment is a file card: media, name, size, and actions. Use it in a composer, a message thread, or an upload list. It does not upload — you map your own machine onto state.

Usage

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

<Attachment>
  <AttachmentMedia>
    <FileTextIcon />
  </AttachmentMedia>
  <AttachmentContent>
    <AttachmentTitle>kit-readme.pdf</AttachmentTitle>
    <AttachmentDescription>PDF · 2.4 MB</AttachmentDescription>
  </AttachmentContent>
  <AttachmentActions>
    <AttachmentAction aria-label="Remove kit-readme.pdf">
      <XIcon />
    </AttachmentAction>
  </AttachmentActions>
</Attachment>

state is idle, uploading, processing, error, or done. Idle is the dashed drop target.

Composition

AttachmentGroup is a scroll row of Attachments.

Image

variant="image" on AttachmentMedia plus an <img>. orientation="vertical" stacks the photo above the name.

States

uploading and processing shimmer the title. error is the red treatment — keep the reason in the description.

Sizes

default in a composer, sm in a thread, xs in a dense list.

Group

AttachmentGroup is a horizontal snap-scroll with an edge fade. Ten files stay one row tall.

Trigger

AttachmentTrigger fills the card behind the actions. Wrap it in a Dialog trigger or a render={<a />} link.

API

AttachmentMedia

AttachmentTrigger

AttachmentAction is a Button. Default size is icon-xs.

Notes

This component does not upload. You own fetch, XHR, or the signed URL.

With other components

Questions

Related