Attachments

File attachment display in grid, inline, and list variants.

Inline

report.pdf

data.csv

Installation

npx shadcn add https://ui.adq.ai/api/r/attachments

Usage

import {
  Attachments,
  Attachment,
  AttachmentPreview,
  AttachmentInfo,
} from "@/components/ai-elements/attachments";

function AttachedFiles({ files }) {
  return (
    <Attachments variant="inline">
      {files.map((file, i) => (
        <Attachment key={i} data={{ ...file, id: String(i) }}>
          <AttachmentPreview />
          <AttachmentInfo />
        </Attachment>
      ))}
    </Attachments>
  );
}

Props

Prop	Type	Default	Description
`variant`	`"grid" \| "inline" \| "list"`	"grid"	Display variant for the attachment list.