ComponentsData display

Attachment list

Files attached to a record — contracts on a deal, an employee's documents, a post's downloads. Mime icons tinted per file family, sizes in the current locale, upload progress, processing and error states, preview, download, remove with undo, and an add button or your own upload slot.

Native list semantics + Intl.NumberFormat (bytes) components/attachment-list.tsx, styles/data.csstheme · material · accent · density · font

Documents

Deal · Northwind renewal 2027

1.2 MB · Ayşe Kaya · Nov 4, 2026

312 kB · Daniel Brooks · Nov 2, 2026

86.4 kB · Ayşe Kaya · Oct 28, 2026

8.7 MB · Mehmet Yılmaz · Oct 21, 2026

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { AttachmentList } from "@vamos-ui/react";

<AttachmentList
  items={files}
  onPreview={(file) => openLightbox(file)}
  onRemove={(file) => removeWithUndo(file)}
  onAddFiles={(files) => upload(files)}
/>

Examples

Thumbnail grid

layout="grid": image thumbnails, or a tinted tile with the extension for other files.

2.4 MB · Nov 8, 2026

3.1 MB · Nov 8, 2026

640 kB · Nov 7, 2026

48.2 MB · Nov 5, 2026

opening-teaser.mp4Processing…

Uploading, processing, error (HR)

Progress is a progressbar with aria-valuetext like "45%, contract.pdf"; errors offer Retry.

Employment contract — Selin Arslan.pdfUploading… 12%

Passport scan.pngProcessing…

Diploma (notarised).tiffFile is larger than 10 MB

Bank details form.pdf96 kB · Selin Arslan · Nov 9, 2026

Inline chips and empty

layout="chips" for comments and forms; readOnly hides remove and add.

invoice-2026-0412.pdf182 kB

delivery-note.jpg1.1 MB

partner-commission-october.csv24.3 kB

No files on this ticket yet

API

AttachmentList

Prop	Type	Default
`items` Files to show.	`AttachmentData[]`	`—`
`layout` Rows with meta, thumbnail tiles or inline chips.	`"list" \| "grid" \| "chips"`	`"list"`
`size` Row height and text size (list).	`"sm" \| "md"`	`"md"`
`onPreview` Makes the name a button (open a Lightbox). Without it a file with url links to it.	`(file) => void`	`—`
`onDownload` Download button. Default: a native download link when url is set.	`(file) => void`	`—`
`onRemove` Remove button; the row fades until the promise settles.	`(file) => void \| Promise<void>`	`—`
`onRetry` Retry on failed uploads.	`(file) => void`	`—`
`onAddFiles` Built-in "Add files" button with a file chooser.	`(files: File[]) => void`	`—`
`accept` accept for the built-in chooser.	`string`	`—`
`uploadSlot` Your own upload control after the files (File upload drop zone).	`ReactNode`	`—`
`readOnly` Hides remove, retry and add.	`boolean`	`false`
`empty` Shown when there is nothing to list or add.	`ReactNode`	`"No files attached"`
`labels` list, empty, preview, download, remove, retry, uploading, progress, processing, failed, add.	`Partial<AttachmentListLabels>`	`—`

AttachmentData

Prop	Type	Default
`id / name / size / mime` Identity, file name with extension, bytes, MIME type.	`string / string / number / string`	`—`
`url / thumbUrl` Open/download URL and image thumbnail.	`string`	`—`
`uploadedBy / uploadedAt` Meta line: "1.2 MB · Ayşe Kaya · Nov 4, 2026".	`string`	`—`
`status` Upload state.	`"uploading" \| "processing" \| "ready" \| "error"`	`"ready"`
`progress / error` 0–100 while uploading; message on error.	`number / string`	`—`

Helpers

Prop	Type	Default
`AttachmentIcon` The tinted mime tile on its own.	`{ mime, name, size }`	`—`
`AttachmentName` File name that truncates its base but keeps the extension.	`{ name }`	`—`
`attachmentKind(mime, name)` pdf, image, document, spreadsheet, presentation, archive, audio, video, code, text, other.	`AttachmentKind`	`—`
`splitFileName(name)` "contract.final.pdf" → ["contract.final", ".pdf"].	`[base, ext]`	`—`

Aspect Ratio

Audit log