File Thumbnail

File Thumbnail gives document lists, upload queues, and attachment trays a consistent preview shell. Pass an image URL or renderer output from your PDF, DOCX, XLSX, or image pipeline; the component handles the thumbnail frame, loading shimmer, fade-in, and fallback state.

Image

PDF

DOCX

XLSX

"use client"

import * as React from "react"
import {
  DocxEditorViewer,
  useDocxEditor,
  useDocxViewerThumbnails,
} from "@extend-ai/react-docx"
import {
  useXlsxViewerController,

View Code

Installation

pnpmnpmyarnbun
Copy
pnpm dlx shadcn@latest add @extend/file-thumbnail

Document Previews

File Thumbnail does not parse documents or install renderer packages. The registry item has no npm dependencies; generate thumbnails with whichever viewer stack you already use, then pass the result through previewImageUrl or previewContent.

Useful Behaviors

• Accepts externally generated thumbnails as an image URL or custom React content.
• Shows a shimmering file-preview state while your thumbnail generator is loading.
• Fades the preview in after it loads.
• Falls back to a blank muted preview surface when no preview image is available or image loading fails.

API Reference

FileThumbnail

The FileThumbnail component renders the reusable thumbnail shell. It accepts externally generated previews from your own rendering pipeline.

ThumbnailFile