Browse components

Attachment

File and image attachment with upload state and actions.

Install

npx shadcn@latest add https://ui.anuragroy.dev/r/attachment.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal

npx shadcn@latest add https://ui.anuragroy.dev/r/attachment.json

GitHub fallback if the website is down:

Terminal

npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/attachment.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/attachment.

Import

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

example.tsx

import { FileText } from "lucide-react"import {  Attachment,  AttachmentContent,  AttachmentDescription,  AttachmentMedia,  AttachmentTitle,} from "@/components/ui/attachment"export function Example() {  return (    <Attachment state="done">      <AttachmentMedia>        <FileText />      </AttachmentMedia>      <AttachmentContent>        <AttachmentTitle>dashboard-spec.pdf</AttachmentTitle>        <AttachmentDescription>PDF · 2.4 MB</AttachmentDescription>      </AttachmentContent>    </Attachment>  )}

API Reference

Attachment

Prop	Type	Default
state	"idle" \| "uploading" \| "processing" \| "error" \| "done"	"done"
size	"default" \| "sm" \| "xs"	"default"
orientation	"horizontal" \| "vertical"	"horizontal"

AttachmentMedia

Prop	Type	Default
variant	"icon" \| "image"	"icon"