Mischief

12 / Files

File Thumbnail

A compact image preview for attachments, upload queues, and file lists. Browser image files work without any setup.

Live previewSource

Use an existing image URL, or choose a local PNG, JPEG, WebP, GIF, SVG, or AVIF file.

Loading preview
Image file
Loading preview
PNG
Loading preview
PNG
Loading preview
PNG

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

export function ImagePreview({ file }: { file: File }) {
  return (
    <FileThumbnail
      file={file}
      className="w-32"
    />
  )
}

API

fileFile | FileThumbnailFileA browser File or an object with a name and optional MIME type.
previewImageUrlstring | nullAn existing image URL. Browser image File objects preview themselves when omitted.
previewAspectRationumberThe frame aspect ratio. Defaults to 1.
fit"cover" | "contain"Image fitting. Defaults to cover.
altstringAlternative text for the preview image. Defaults to decorative.
isLoadingbooleanShows the loading state.
hasErrorbooleanForces the file-type fallback.
previewClassNamestringClasses for the preview content.
classNamestringClasses for the preview frame.

Accessibility

Failed previews expose the file name and explain that the image is unavailable. Loading previews use a named status. Preview images default to decorative because file names usually sit beside thumbnails, but alt text can be supplied when the image itself carries meaning. Reduced motion removes the fade and shimmer movement.

Dependencies

lucide-react, clsx, tailwind-merge