Attachments

pro

Attachments presents removable file chips or image tiles with reusable preview and file-info parts.

launch-brief.png

image/png

notes.pdf

application/pdf

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Attachments

pnpm dlx nateui@latest add Attachments

yarn dlx nateui@latest add Attachments

scope.pdf

application/pdf

estimates.xlsx

application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

Prop	Description	Type	Default
`variant`	Arranges chips in a wrapping row, square tiles in a grid, or images at their own size.	`'inline' \| 'grid' \| 'media'`	`'inline'`
`...divProps`	Standard `<div>` attributes forwarded to the container.	`ComponentProps<'div'>`	—

Prop	Description	Type	Default
`data`	File metadata and preview URL.	`AttachmentData`	—
`onRemove`	Makes the remove action available.	`(attachment: AttachmentData) => void`	—
`variant`	Matches the parent layout. Inherited from `Attachments` when omitted.	`'inline' \| 'grid' \| 'media'`	`'inline'`
`children`	Use `Preview` and `Info` to arrange the item explicitly.	`ReactNode`	—

type AttachmentData = {
  id: string;
  name: string;
  mediaType: string;
  url: string;
};