Document Viewer Sidebar
Shared responsive thumbnail sidebar behavior for PDF, DOCX, and other document viewers.
Document Viewer Sidebar provides the responsive shell used by document viewers to show thumbnail navigation inline on wider layouts and as an overlay on narrower layouts.
Page 1 of 4
Overlay thumbnails
Page 1: Invoice summary
"use client"
import * as React from "react"
import {
DocumentViewerThumbnailSidebar,
useElementWidth,
useInlineThumbnailSidebar,
} from "@/components/ui/document-viewer-sidebar"
Installation
pnpm dlx shadcn@latest add @extend/document-viewer-sidebar
API Reference
DocumentViewerThumbnailSidebar
The DocumentViewerThumbnailSidebar component renders a responsive sidebar container for document thumbnails.
| Prop | Type | Default | Required |
|---|---|---|---|
children | React.ReactNode | - | Yes |
className | string | - | No |
inline | boolean | - | Yes |
open | boolean | - | Yes |
DocumentViewerSidebarSkeleton
The DocumentViewerSidebarSkeleton component renders the sidebar loading state used while document thumbnails are not ready.
| Prop | Type | Default | Required |
|---|---|---|---|
inline | boolean | - | Yes |
useElementWidth
The useElementWidth hook returns a ref and measured width for responsive viewer layout decisions.
useInlineThumbnailSidebar
The useInlineThumbnailSidebar hook returns whether the sidebar should render inline for a measured viewer width.