Attachment
A file in a message: its icon or picture, name and size, with an upload state.
@cupertinoui/attachmentRegistry JSON import { FileTextIcon, ImageIcon, XIcon } from "lucide-react"
import {
Attachment,
AttachmentAction,
AttachmentActions,
AttachmentContent,
AttachmentDescription,
AttachmentGroup,
AttachmentMedia,
AttachmentTitle,
} from "@/components/ui/attachment"
// Files added to a message: one done, one still uploading.
export default function AttachmentDemo() {
return (
<AttachmentGroup className="w-full max-w-md">
<Attachment>
<AttachmentMedia>
<FileTextIcon />
</AttachmentMedia>
<AttachmentContent>
<AttachmentTitle>Roadmap.key</AttachmentTitle>
<AttachmentDescription>Keynote · 2,4 MB</AttachmentDescription>
</AttachmentContent>
<AttachmentActions>
<AttachmentAction aria-label="Remove">
<XIcon />
</AttachmentAction>
</AttachmentActions>
</Attachment>
<Attachment state="uploading">
<AttachmentMedia>
<ImageIcon />
</AttachmentMedia>
<AttachmentContent>
<AttachmentTitle>Wallpaper.heic</AttachmentTitle>
<AttachmentDescription>Uploading…</AttachmentDescription>
</AttachmentContent>
</Attachment>
</AttachmentGroup>
)
}Installation
pnpm dlx shadcn@latest add @cupertinoui/attachmentThe first install also adds the macOS theme. See Installation to set up the registry.
Usage
import { Attachment, AttachmentContent, AttachmentMedia, AttachmentTitle } from "@/components/ui/attachment"
<Attachment>
<AttachmentMedia><FileTextIcon /></AttachmentMedia>
<AttachmentContent>
<AttachmentTitle>Roadmap.key</AttachmentTitle>
</AttachmentContent>
</Attachment>API Reference
Every part forwards the props of the underlying element. The props below are the ones CupertinoUI adds or changes.
Attachment
| Prop | Type | Description |
|---|---|---|
state | "idle" | "uploading" | "processing" | "error" | "done"Default: "done" | Shows progress or an error. |
size / orientation | | The layout. |
className | string | Extra classes, merged with the component's own. |