## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @dotui/attachment ``` ```bash pnpm dlx shadcn@latest add @dotui/attachment ``` ```bash yarn dlx shadcn@latest add @dotui/attachment ``` ```bash bun x shadcn@latest add @dotui/attachment ``` ## Usage [#usage] ```tsx import { Attachment, AttachmentContent, AttachmentDescription, AttachmentMedia, AttachmentTitle, } from "@/ui/attachment" ``` ```tsx quarterly-report.pdf 1.2 MB · PDF ``` ## Anatomy [#anatomy] `Attachment` is the card; its `state` walks the upload lifecycle — `idle` renders a dashed outline, `uploading` and `processing` pulse the title, and `error` switches to the danger treatment. `AttachmentMedia` holds a file-type icon or an image thumbnail, `AttachmentActions` holds icon buttons that stay pressable even when an `AttachmentTrigger` stretches a click target over the whole card. A scrolling row of attachments goes in an `AttachmentGroup`. ```tsx import { Attachment, AttachmentAction, AttachmentActions, AttachmentGroup, AttachmentTrigger, } from "@/ui/attachment" ``` ```tsx {/* media, content… */} ``` ## Examples [#examples] ## API Reference [#api-reference] ### Attachment [#attachment] ### AttachmentMedia [#attachmentmedia] ### AttachmentContent [#attachmentcontent] ### AttachmentTitle [#attachmenttitle] ### AttachmentDescription [#attachmentdescription] ### AttachmentActions [#attachmentactions] ### AttachmentAction [#attachmentaction] ### AttachmentTrigger [#attachmenttrigger] ### AttachmentGroup [#attachmentgroup]