Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Shadcn Attachment for React

File or image attachment with media, metadata, upload state, and actions.

Ark UIBase UIReact AriaRadix UI
Workspace
workspace.pngPNG · 820 KB
Desk
desk-reference.jpgJPG · 1.1 MB
Office
office-reference.jpgJPG · 940 KB
sales-dashboard.pdfUploading · 64%
message-renderer.tsxTypeScript · 12 KB

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/attachment.json

Anatomy

Attachment
├── AttachmentMedia
├── AttachmentContent
│   ├── AttachmentTitle
│   └── AttachmentDescription
├── AttachmentActions
│   └── AttachmentAction
└── AttachmentTrigger

Use AttachmentGroup to lay out multiple attachments in a scrollable row.

AttachmentGroup
├── Attachment
└── Attachment

Usage

import {
  Attachment,
  AttachmentAction,
  AttachmentActions,
  AttachmentContent,
  AttachmentDescription,
  AttachmentMedia,
  AttachmentTitle,
} from "@/components/ui/attachment";
<Attachment className="max-w-full min-w-0">
  <AttachmentMedia>
    <FileTextIcon aria-hidden="true" className="size-4" />
  </AttachmentMedia>
  <AttachmentContent className="max-w-full min-w-0">
    <AttachmentTitle>sales-dashboard.pdf</AttachmentTitle>
    <AttachmentDescription>PDF · 2.4 MB</AttachmentDescription>
  </AttachmentContent>
  <AttachmentActions>
    <AttachmentAction aria-label="Remove sales-dashboard.pdf">
      <XIcon aria-hidden="true" className="size-4" />
    </AttachmentAction>
  </AttachmentActions>
</Attachment>

Demos

Image

Set variant="image" on AttachmentMedia and render an <img> inside it.

States

Set state to reflect the upload lifecycle.

Sizes

Use size to switch between default, sm, and xs.

Group

Wrap attachments in AttachmentGroup for a horizontally scrollable row.

Trigger

Add an AttachmentTrigger to make the whole card open a link or dialog.

API Reference