Sections
File Viewer
- Overview
- Anatomy
- Header
- Navigation
- Renderers
FileViewerPreview is the compact File Viewer entry point. It creates the
provider, frame, inset, viewport, and routed document for a single file.
<FileViewerPreview source={source} className="h-full" />Behavior
- Renders
FileViewerProvider,FileViewer,FileViewerInset,FileViewerViewport, andFileViewerDocumentfor you. - Uses
FileViewerDocument controlsso renderer controls stay inside the routed document instead of requiring header controls. - Does not render
FileViewerHeaderorFileViewerSidebar. Use the composed anatomy when you need a header, navigation rail, or workflow chrome. - Is the right leaf for nested attachment previews where a parent viewer already owns the surrounding surface.
API Reference
| Prop | Type | Description |
|---|---|---|
source | ViewerSource | The file source. Required. |
category | FileCategory | Force a renderer category instead of detecting it. |
fallbackFrameSize | { width; height } | Initial frame size for image-like fallbacks. |
fallbackSlideSize | { width; height } | Initial slide size for presentation fallbacks. |
isolateStyles | boolean | Scope document styles where supported. |
className | string | Class on the preview frame. |
Source
file-viewer-preview.tsx
"use client";
import { cn } from "@/lib/utils";
import {
FileViewerContent,
FileViewerInset,
FileViewerViewport,
} from "./file-viewer-layout";
import { FileViewerDocument } from "./file-viewer-document";
import { FileViewer } from "./file-viewer-shell";
import { FileViewerProvider } from "./file-viewer-provider";