Attachment

Displays a file attachment with media, title, description and actions.

sales-dashboard.pdfPDF · 2.4 MB

Installation

pnpm dlx shadcn@latest add https://neobrutalism.dev/r/attachment.json

Usage

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

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

Examples

Default

sales-dashboard.pdfPDF · 2.4 MB

States

Use the state prop (idle, uploading, processing, error or done) to reflect the upload progress.

Drop a fileWaiting for a file

quarterly-report.pdfUploading · 45%

large-video.mp4File is too large

notes.mdMarkdown · 12 KB

Image

cat.jpgJPG · 340 KB

Vertical

cat.jpg340 KB

report.pdf2.4 MB