Docs
File Preview
File Preview
A component for previewing image and text files.
Component file-preview-demo not found in registry.
The FilePreview component provides a consistent way to display file previews with support for both image and text files.
Installation
npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/file-preview.jsonUsage
import { FilePreview } from "@/registry/default/ui/file-preview"
export function FilePreviewDemo() {
const [file, setFile] = useState<File | null>(null)
return (
<div>
{file && <FilePreview file={file} onRemove={() => setFile(null)} />}
</div>
)
}Props
FilePreview
| Prop | Type | Description |
|---|---|---|
| file | File | The file object to preview |
| onRemove | Function | Callback function when remove is clicked |