File and image attachments with progress, failure recovery, metadata, and removal actions.
import { useState } from 'react'
import Attachments, { AttachmentItem } from '@/components/ui/attachments'
function AttachmentVariantPreview({
variant,
showAll = false,
}: {
variant: 'default' | 'uploading' | 'failed'
showAll?: boolean
}) {
const [items, setItems] = useState<AttachmentItem[]>(() => {
const examples: AttachmentItem[] = [
{ id: 'design', kind: 'image', name: 'component-layout.png', size: '2.4 MB', progress: 72 },
{ id: 'spec', kind: 'pdf', name: 'agent-spec.pdf', size: '1.8 MB', progress: 45 },
{ id: 'notes', kind: 'document', name: 'project-notes.docx', size: '340 KB', progress: 88 },
{ id: 'trace', kind: 'file', name: 'trace.json', size: '24 KB', progress: 28 },
]
return showAll ? examples : [examples[1]]
})
return (
<div className={showAll ? 'w-full max-w-xl' : 'w-full max-w-sm'}>
<Attachments
className={showAll ? undefined : 'sm:grid-cols-1'}
variant={variant}
items={items}
onRemove={(id) => setItems((current) => current.filter((item) => item.id !== id))}
onRetry={(id) =>
setItems((current) =>
current.map((item) =>
item.id === id ? { ...item, status: 'uploading', progress: 0 } : item,
),
)
}
/>
</div>
)
}
export default function Demo() {
return <AttachmentVariantPreview variant="default" showAll />
}
Part of Pasta UI — browse the full library on 21st.dev.