Attachment
A file sent or about to be sent: a mark, its name in leaning type, a line under it, and small actions.
Install
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/attachmentExamples
Sent, uploading, failed, not sent yet
import { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle,} from "@/components/zero/attachment";import { AlertIcon, CloseIcon, LockIcon } from "@/components/zero/icons";import { Spinner } from "@/components/zero/spinner";export default function AttachmentFiles() { return ( <AttachmentGroup className="w-full max-w-xl flex-wrap"> <Attachment> <AttachmentMedia variant="image"> {/* biome-ignore lint/performance/noImgElement: a small SVG sample, and the demo is copied into projects without next/image */} <img src="/samples/route-map.svg" alt="" /> </AttachmentMedia> <AttachmentContent> <AttachmentTitle>route-map.svg</AttachmentTitle> <AttachmentDescription>12 KB</AttachmentDescription> </AttachmentContent> <AttachmentActions> <AttachmentAction aria-label="Remove route-map.svg"> <CloseIcon /> </AttachmentAction> </AttachmentActions> </Attachment> <Attachment state="uploading"> <AttachmentMedia> <Spinner aria-hidden /> </AttachmentMedia> <AttachmentContent> <AttachmentTitle>manifest.pdf</AttachmentTitle> <AttachmentDescription>Uploading · 64%</AttachmentDescription> </AttachmentContent> </Attachment> <Attachment state="error"> <AttachmentMedia> <AlertIcon /> </AttachmentMedia> <AttachmentContent> <AttachmentTitle>gate-codes.txt</AttachmentTitle> <AttachmentDescription>Too large to send</AttachmentDescription> </AttachmentContent> </Attachment> <Attachment state="idle" size="sm"> <AttachmentMedia> <LockIcon /> </AttachmentMedia> <AttachmentContent> <AttachmentTitle>seal.key</AttachmentTitle> <AttachmentDescription>Not sent yet</AttachmentDescription> </AttachmentContent> </Attachment> </AttachmentGroup> );}Behaviour
The mark is an icon in a slanted black well, or the picture in an ink frame. state tells where the file is: idle (a dashed outline), uploading and processing (the picture dimmed, the name quiet), error (outlined in red), done.
AttachmentTrigger makes the whole card open the file, under its actions. AttachmentGroup lines several up in a row that scrolls sideways.
Props
Attachment
| Prop | Type | Default | Description |
|---|---|---|---|
| state | "idle" | "uploading" | "processing" | "error" | "done" | "done" | Where the file is. |
| size | "default" | "sm" | "default" | How much room around it. |
| orientation | "horizontal" | "vertical" | "horizontal" | Mark beside the name, or above it. |
AttachmentMedia
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "icon" | "image" | "icon" | An icon in a slanted well, or a framed picture. |