Attachment

Displays a file attachment with a preview, name, and actions.

invoice.pdf128 KB

photo.pngUpload failed

Installation

pnpm dlx shadcn@latest add https://8bit.cnlibs.com/r/attachment.json

Usage

import { FileTextIcon, ImageIcon, XIcon } from "lucide-react";
import {
  Attachment,
  AttachmentAction,
  AttachmentActions,
  AttachmentContent,
  AttachmentDescription,
  AttachmentMedia,
  AttachmentTitle,
} from "@/components/ui/attachment";

<div className="flex w-full max-w-md flex-col gap-2">
  <Attachment>
    <AttachmentMedia>
      <FileTextIcon />
    </AttachmentMedia>
    <AttachmentContent>
      <AttachmentTitle>invoice.pdf</AttachmentTitle>
      <AttachmentDescription>128 KB</AttachmentDescription>
    </AttachmentContent>
    <AttachmentActions>
      <AttachmentAction aria-label="Remove attachment">
        <XIcon />
      </AttachmentAction>
    </AttachmentActions>
  </Attachment>
  <Attachment state="error">
    <AttachmentMedia>
      <ImageIcon />
    </AttachmentMedia>
    <AttachmentContent>
      <AttachmentTitle>photo.png</AttachmentTitle>
      <AttachmentDescription>Upload failed</AttachmentDescription>
    </AttachmentContent>
    <AttachmentActions>
      <AttachmentAction aria-label="Remove attachment">
        <XIcon />
      </AttachmentAction>
    </AttachmentActions>
  </Attachment>
</div>

Uploading

Set state to uploading to show a pending indicator.

presentation.keyUploading...