Attachment

Displays a file or image attachment, its media, name, and metadata, with optional actions and upload state. Use it for files and images in chat composers, message threads, and upload lists.

Last updated January 1, 1980

CreditsModifiedPublished

Copied from shadcn/ui.

Replaced the physical right-3 positioning of the vertical orientation's actions overlay with logical end-3 so it mirrors in RTL
Swapped the scrollbar-none utility for no-scrollbar from the shared shadcn/tailwind.css utilities this repo imports

Overview

Installation

$ pnpm dlx shadcn@latest add @persianlabsui/attachment

Usage

import {
 
  Attachment,
  AttachmentAction,
  AttachmentActions,
  AttachmentContent,
  AttachmentDescription,
  AttachmentMedia,
  AttachmentTitle,
} from "@/components/ui/attachment"
 
<Attachment>
  <AttachmentMedia>
    <FileTextIcon />
  </AttachmentMedia>
  <AttachmentContent>
    <AttachmentTitle>sales-dashboard.pdf</AttachmentTitle>
    <AttachmentDescription>PDF · 2.4 MB</AttachmentDescription>
  </AttachmentContent>
  <AttachmentActions>
    <AttachmentAction aria-label="Remove sales-dashboard.pdf">
      <XIcon />
    </AttachmentAction>
  </AttachmentActions>
</Attachment>

Image

Set variant="image" on AttachmentMedia and render an <img> inside it. Use orientation="vertical" to stack the media above the content.

States

Set state to reflect the upload lifecycle. uploading and processing shimmer the title, and error switches to a destructive treatment.

Sizes

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

Group

Wrap attachments in AttachmentGroup to lay them out in a horizontally scrollable, snapping row with an edge fade.

Trigger

Add an AttachmentTrigger to make the whole card open a link or dialog. It fills the card behind the actions, so the actions stay clickable.

<Dialog>
  <Attachment>
    {/* media, content, actions */}
    <DialogTrigger
      render={<AttachmentTrigger aria-label="Preview research-summary.pdf" />}
    />
  </Attachment>
  <DialogContent>{/* ... */}</DialogContent>
</Dialog>

RTL

The card is laid out with logical properties, so it mirrors automatically — including the vertical orientation's actions overlay, which is positioned with end-3.

API Reference

Attachment

Prop	Type	Default	Description
state	"idle" \| "uploading" \| "processing" \| "error" \| "done"	"done"	The upload state. Drives styling and the title shimmer while in progress.
size	"default" \| "sm" \| "xs"	"default"	The attachment size.
orientation	"horizontal" \| "vertical"	"horizontal"	Lay the media beside or above the content.
class	string	-	Additional classes to apply to the root element.

AttachmentMedia

Prop	Type	Default	Description
variant	"icon" \| "image"	"icon"	Whether the media holds an icon or an <img>.
class	string	-	Additional classes to apply to the media slot.

AttachmentContent

Prop	Type	Default	Description
class	string	-	Additional classes to apply to the content slot.

AttachmentTitle

Prop	Type	Default	Description
class	string	-	Additional classes to apply to the title. Shimmers while the attachment is uploading or processing.

AttachmentDescription

Prop	Type	Default	Description
class	string	-	Secondary metadata such as the file type, size, or upload status.

AttachmentActions

Prop	Type	Default	Description
class	string	-	Additional classes to apply to the actions container, aligned to the end of the attachment.

AttachmentAction

Prop	Type	Default	Description
size	Button["size"]	"icon-xs"	The button size.
…props	React.ComponentProps<typeof Button>	-	Props spread to the underlying Button.

AttachmentTrigger

Prop	Type	Default	Description
render	ReactElement \| function	-	Render as a different element, such as a link.
…props	React.ComponentProps<"button">	-	Props spread to the trigger element.

AttachmentGroup

Prop	Type	Default	Description
class	string	-	Lays out attachments in a horizontally scrollable, snapping row.

Edit this page on GitHub

PreviousAspect Ratio NextAvatar