Components
File/image chip for AI chat input. Renders file icons by extension, image thumbnails, image-only mode, and a hover-revealed remove button. Self-contained port from 21st.dev Agent Elements.
npx shadcn@latest add https://21st.dev/r/21stdev/file-attachmentLoading preview...
import { FileAttachment } from "@/components/ui/file-attachment";
const heroSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#f59e0b"/><stop offset="1" stop-color="#ec4899"/></linearGradient></defs><rect width="64" height="64" fill="url(#g)"/><circle cx="44" cy="20" r="8" fill="#fff" fill-opacity="0.85"/><path d="M0 50 L20 36 L36 46 L52 30 L64 42 L64 64 L0 64 Z" fill="#000" fill-opacity="0.25"/></svg>`;
const heroImg = `data:image/svg+xml;utf8,${encodeURIComponent(heroSvg)}`;
export default function Demo() {
return (
<div className="flex h-full w-full items-center justify-center p-8">
<div className="flex items-center gap-3">
<FileAttachment
id="report"
filename="quarterly-report.pdf"
size={245_000}
/>
<FileAttachment
id="hero"
filename="hero.png"
size={86_000}
isImage
url={heroImg}
/>
</div>
</div>
);
}