Display uploaded files with smart type detection, file icons, image thumbnails, and upload progress indicators.
Command Palette
Search for a command to run...
Search for a command to run...
Display uploaded files with smart type detection, file icons, image thumbnails, and upload progress indicators.
document.pdf
PDFspreadsheet.xlsx
SPREADSHEETscript.tsx
TYPESCRIarchive.zip
ZIPRich previews for everything you attach. Images, code, docs—verified before sending.
npx shadcn@latest add https://ui.heygaia.io/r/file-preview.jsonimport { FilePreview } from "@/components/ui/file-preview";
export default function Example() {
const files = [
{
id: "1",
url: "/uploads/document.pdf",
name: "report.pdf",
type: "application/pdf",
},
];
return (
<FilePreview
files={files}
onRemove={(id) => console.log("Remove:", id)}
/>
);
}large-video.mp4
MP4completed.pdf
PDFaudio-file.mp3
MPEG| Prop | Type | Description |
|---|---|---|
| files | UploadedFile[] | Array of files to display |
| onRemove | (id: string) => void | Callback when remove button is clicked |
| className | string | Additional CSS classes |
| Property | Type | Description |
|---|---|---|
| id | string | Unique file identifier |
| url | string | File URL (for image previews) |
| name | string | File name |
| type | string | MIME type (e.g., "image/png") |
| description | string | Optional description |
| isUploading | boolean | Show loading spinner |
The component automatically detects and shows appropriate icons for: