Attachment

Installation

npx shadcn@latest add @uqudo/attachment

Installing it also installs Button, which AttachmentAction is built on.

Usage

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

<Attachment>
  <AttachmentMedia>
    <FileTextIcon />
  </AttachmentMedia>
  <AttachmentContent>
    <AttachmentTitle>quarterly-report.pdf</AttachmentTitle>
    <AttachmentDescription>2.4 MB</AttachmentDescription>
  </AttachmentContent>
  <AttachmentActions>
    <AttachmentAction aria-label="Remove">
      <XIcon />
    </AttachmentAction>
  </AttachmentActions>
</Attachment>

Attachment is a bordered card that lays out a media slot, a text block and a row of actions. Every part is optional: the padding adapts to whether AttachmentMedia or AttachmentContent is present, so a bare thumbnail and a full row with actions both look right.

The state prop reflects an upload lifecycle. idle draws a dashed border, uploading and processing add a shimmer to the title, and error turns the border, media and description destructive.

To make the whole attachment clickable, add an AttachmentTrigger. It renders an invisible button stretched over the card; keep the real actions inside AttachmentActions, which is layered above the trigger so they stay clickable.

Examples

Group

AttachmentGroup lays attachments out in a horizontally scrolling, snapping row.

Sizes and states

Image

AttachmentMedia with variant="image" stretches its child to fill the square. Combine it with orientation="vertical" on Attachment for a thumbnail-first layout.

API Reference

Attachment

AttachmentMedia

AttachmentAction

A ghost, icon-sized Button. Give each one an aria-label.

AttachmentTrigger

Other parts

These forward className and every prop of the element they render.

Data attributes