FileViewerHeader

FileViewerHeader is the top row of a composed file viewer. It is intentionally file-type agnostic: PDF, image, spreadsheet, text, and email renderers all register their operational controls into the same header surface.

"use client";

import {
  FileViewer,
  FileViewerContent,
  FileViewerDocument,
  FileViewerHeader,
  FileViewerTitle,
  FileViewerProvider,
  FileViewerSidebar,

Usage

Compose the header explicitly, with the sidebar trigger in the start group when FileViewerContent has a sidebar:

Copy<FileViewerHeader>
  <FileViewerSidebarTrigger />
  <div className="flex min-w-0 flex-1 items-baseline gap-2">
    <FileViewerTitle />
    <FileViewerMeta />
  </div>
  <FileViewerControls />
</FileViewerHeader>

Rendered without children, FileViewerHeader falls back to the default title/meta/controls composition:

Copy<FileViewerHeader />

Behavior

• Renders a data-slot="file-viewer-header" row with a flex layout that wraps on narrow widths and lines up on wider ones.
• With no children, it renders FileViewerTitle and FileViewerMeta on the left and FileViewerControls on the right, so the common case needs no inner markup.
• It owns layout only. Renderer-specific controls register into file-viewer state and surface through FileViewerControls; the header never takes PDF- or spreadsheet-specific props.
• Use it for file identity and controls. Keep domain workflow state out of the header unless the file viewer itself owns 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,