Attachment: Image

variant="image" on <AttachmentMedia /> shows a square thumbnail that shimmers while it loads. Set orientation="vertical" for a tile with the preview on top.

dolomites.pngPNG · 1.1 MB

summit.pngUploading… 64%

import { IconX } from "@tabler/icons-react"

import {
  Attachment,
  AttachmentAction,
  AttachmentActions,
  AttachmentContent,
  AttachmentDescription,
  AttachmentMedia,
  AttachmentTitle,
} from "@/components/ui/attachment"

export function AttachmentImage() {
  return (
    <div className="flex flex-wrap items-start justify-center gap-3">
      <Attachment>
        <AttachmentMedia variant="image">
          <img src="/preview/landscape.svg" alt="" />
        </AttachmentMedia>
        <AttachmentContent>
          <AttachmentTitle>dolomites.png</AttachmentTitle>
          <AttachmentDescription>PNG · 1.1 MB</AttachmentDescription>
        </AttachmentContent>
      </Attachment>
      <Attachment orientation="vertical">
        <AttachmentMedia variant="image">
          <img src="/preview/landscape.svg" alt="" />
        </AttachmentMedia>
        <AttachmentContent>
          <AttachmentTitle>dolomites.png</AttachmentTitle>
          <AttachmentDescription>PNG · 1.1 MB</AttachmentDescription>
        </AttachmentContent>
        <AttachmentActions>
          <AttachmentAction aria-label="Remove dolomites.png">
            <IconX />
          </AttachmentAction>
        </AttachmentActions>
      </Attachment>
      <Attachment orientation="vertical" state="uploading" progress={64}>
        <AttachmentMedia variant="image">
          <img src="/preview/landscape.svg" alt="" />
        </AttachmentMedia>
        <AttachmentContent>
          <AttachmentTitle>summit.png</AttachmentTitle>
          <AttachmentDescription>Uploading… 64%</AttachmentDescription>
        </AttachmentContent>
      </Attachment>
    </div>
  )
}

Add this example

This adds the example as components/examples/attachment/image.tsx, together with the Attachment component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/attachment-image.json

To add only the component, follow the Attachment installation.

Props in this example

The Attachment props this example sets, from the API reference.

Attachment

Prop	Type	Default
`state`	`"idle" \| "uploading" \| "processing" \| "error" \| "done"`	`"done"`
`progress`0 to 100. Shown only while uploading, and clamped to that range.	`number`	`–`
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`

AttachmentMedia

Prop	Type	Default
`variant`image wraps its child in a square AspectRatio with a file icon fallback.	`"icon" \| "image"`	`"icon"`

Every prop is in the Attachment API reference.

More Attachment examples

See them all, with keyboard support and accessibility notes, on the Attachment page.