File Thumbnail

File Thumbnail gives document lists, upload queues, and attachment trays a consistent preview shell. It can render plain image previews and generate first-page thumbnails for PDF, DOCX, and XLSX files when you pass a source, file.source, or file.url.

PDF

DOCX

XLSX

Image

"use client"

import * as React from "react"

import {
  FileThumbnail,
  type ThumbnailFile,
} from "@/components/ui/file-thumbnail"

type DemoFile = ThumbnailFile & {

View Code

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://ui.extend.ai/r/file-thumbnail.json
Copy

Document Previews

The registry install includes the renderer dependencies used by the component:

• react-pdf and pdfjs-dist for first-page PDF thumbnails.
• @extend-ai/react-docx for first-page DOCX thumbnails.
• @extend-ai/react-xlsx for first-sheet XLSX thumbnails.

Pass a File, Blob, or URL string through source, file.source, or file.url. You can still override the generated preview with previewImageUrl or previewContent.

Useful Behaviors

• Installs the PDF, DOCX, and XLSX renderer packages through the registry item.
• Generates first-page thumbnails for image, PDF, DOCX, and XLSX sources.
• Shows a shimmering file-preview state while an external preview is being generated or loaded.
• Fades the preview in after it loads.
• Falls back to a compact file icon when no preview image is available or image loading fails.
• Supports optional metadata for file name, type, size, page count, or processing status.

API Reference

FileThumbnail

The FileThumbnail component renders the reusable thumbnail shell. It accepts externally generated previews and can generate image, PDF, DOCX, and XLSX thumbnails from a source.

ThumbnailFile