Attachment

Displays a file or media attachment, typically inside a chat message or composer.

$bunx shadcn@latest add @nx-ui/attachment
Registry item
Installs withbuttonutils

Basic usage

An icon, a title and description, and a remove action, grouped in a scrollable row.

Barrowfield soil assay.pdf2.4 MB
Weekly turning log.xlsx312 KB

Sizes & orientation

Three densities (default, sm, xs) and both a horizontal row and a vertical tile with image media.

Intake summary.pdfDefault size
Intake summary.pdfSmall size
Intake summary.pdfExtra small
Compost windrow, row three
Windrow 3.jpgVertical, image media

States

idle (dashed, awaiting a drop), uploading and processing (shimmering title), error, and done.

Drop a file hereIdle, up to 25 MB
Nutrient panel.csvUploading… 48%
Moisture readings.csvProcessing…
Odour survey.pdfUpload failed — file too large
Feedstock manifest.pdfReady

Actions & trigger

AttachmentAction adds icon buttons; AttachmentTrigger overlays the whole card as a single control, e.g. a link to open the file.

Site inspection.pdfDownload or remove
Barrowfield soil assay.pdfClick the card to open

Composition: sample submission composer

A message composer for a Nexus soil-recovery project, mixing upload states with a removable attachment list.

Barrowfield ReGenAttach lab results
3 files
Barrowfield soil assay.pdf2.4 MB · uploaded by Priya Shah
Weekly turning log.xlsx312 KB · uploaded by Femi Adeyemi
Windrow 3, day 12.jpgUploading… 6.1 MB

API reference

Exported parts and their props, extracted from the component source.