Attachment

File and media attachment cards — sizes, upload states, image media, and action buttons.

Default

File card with media, title, description, and actions.

Installation

CLI

npx @sonojs/ui@latest add attachment

Also needsnpx @sonojs/ui@latest add button spinner && npm i lucide-react

Usage

attachment.tsx

import { FileCodeIcon, XIcon } from "lucide-react"
import {
  Attachment,
  AttachmentAction,
  AttachmentActions,
  AttachmentContent,
  AttachmentDescription,
  AttachmentMedia,
  AttachmentTitle,
} from "@/components/ui/attachment"

export function Example() {
  return (
    <Attachment className="w-full max-w-sm">
      <AttachmentMedia>
        <FileCodeIcon />
      </AttachmentMedia>
      <AttachmentContent>
        <AttachmentTitle>message-renderer.tsx</AttachmentTitle>
        <AttachmentDescription>TypeScript · 12 KB</AttachmentDescription>
      </AttachmentContent>
      <AttachmentActions>
        <AttachmentAction aria-label="Remove">
          <XIcon />
        </AttachmentAction>
      </AttachmentActions>
    </Attachment>
  )
}

Props

Prop	Type	Default	Description
state	"idle" · "uploading" · "processing" · "error" · "done"	"done"	Upload / processing visual state on Attachment.
size	"default" · "sm" · "xs"	"default"	Control density and padding.
orientation	"horizontal" · "vertical"	"horizontal"	Layout direction (vertical suits image thumbnails).
variant	"icon" · "image"	"icon"	On AttachmentMedia — icon tile or image fill.