Components
Loading preview...
A compact file preview thumbnail shell for externally generated images, loading states, and fallback states. Renders a square preview at any aspect ratio with a blur-in reveal on first image load.
npx shadcn@latest add https://21st.dev/r/extend-hq/file-thumbnailimport { FileThumbnail } from "@/components/ui/file-thumbnail"
export default function FileThumbnailDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center gap-4 p-8">
<FileThumbnail
file={{ name: "report.pdf", type: "application/pdf" }}
previewContent={
<div className="grid size-full place-items-center text-xs font-medium text-muted-foreground">
PDF
</div>
}
className="size-20"
/>
<FileThumbnail
file={{ name: "photo.png", type: "image/png" }}
previewImageUrl="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?w=160&h=160&fit=crop"
className="size-20"
/>
<FileThumbnail
file={{ name: "data.csv", type: "text/csv" }}
className="size-20"
/>
</div>
)
}