FileViewer

FileViewerProvider owns source identity, renderer routing state, resource loading, controls registration, and sidebar open state. FileViewer is the spatial root under that provider: it adapts the provider state into the generic viewer frame and owns layout concerns like sidebarMode and inlineBreakpoint. Sidebar configuration (side, collapsible, width) lives on FileViewerSidebar itself.

"use client";

import * as React from "react";

import { useMediaQuery } from "@/hooks/use-media-query";
import { cn } from "@/lib/utils";
import {
  FileViewer,
  FileViewerContent,
  FileViewerDocument,

Usage

Use FileViewerPreview for a compact routed preview:

Copy<FileViewerPreview source={source} />

The composed form gives you the same file-scoped context with explicit slots:

Copy<FileViewerProvider source={source} defaultSidebarOpen>
  <FileViewer>
    <FileViewerHeader>
        <FileViewerSidebarTrigger />
        <FileViewerTitle />
        <FileViewerControls />
    </FileViewerHeader>
    <FileViewerContent>
      <FileViewerSidebar aria-label="Document navigation" />
      <FileViewerInset>
        <FileViewerViewport>
          <FileViewerDocument />
        </FileViewerViewport>
      </FileViewerInset>
    </FileViewerContent>
  </FileViewer>
</FileViewerProvider>

Use FileViewerPreview to embed a single file inside your own layout:

Copy<FileViewerPreview source={source} className="h-full" />

Behavior

• Source routing. FileViewerProvider resolves the source into a category and FileViewerDocument selects a renderer (PDF, image, CSV, text, Markdown, HTML, Office, …). Pass category to force a category instead of detecting one.
• Single source of truth. The resolved descriptor and resource are shared through context, so every part reads the same identity — there is no prop drilling between header, sidebar, and inset.
• Sidebar state. The provider owns open/collapsed state (defaultSidebarOpen, or controlled sidebarOpen/onSidebarOpenChange); FileViewer passes that state into the frame and owns layout props such as sidebarMode and inlineBreakpoint. The mounted FileViewerSidebar is the single source of sidebar configuration: side, collapsible, and width.
• Deterministic geometry. Inline sidebar transitions run through one FileViewer motion store. The store publishes sidebar width, document width, progress, and renderer sizing through root CSS variables and the viewport contract, so the rail, inset, and fit-width renderers move from the same scalar.
• Ownership boundary. FileViewerProvider owns file concerns only: source loading, type routing, download identity, sidebar state, and renderer control registration. Workflow semantics belong outside it.

API Reference

Source

"use client";

export type { ViewerSource } from "./file-viewer-core";
export {
  FileViewerContent,
  FileViewerInset,
  FileViewerLegend,
  FileViewerViewport,
  type FileViewerContentProps,
  type FileViewerInsetProps,
  type FileViewerLegendProps,
  type FileViewerViewportProps,