Docs / Viewers / Document Viewer Sidebar

Document Viewer Sidebar

Shared responsive thumbnail sidebar for document viewers: inline beside the page when the viewer is at least 768px wide, an overlay on narrower viewers.

Dark mode

Differences from upstream

• useElementWidth() returns { ref, width }, where ref is a Svelte attachment ({@attach shell.ref}) and width is reactive, instead of a React [ref, width] tuple.
• class is accepted alongside className; both are merged.
• children is a Svelte snippet instead of ReactNode.
• The undocumented Tailwind class props widthClassName and closedInlineClassName are not ported; the sidebar is fixed at upstream's default 10rem.
• Each component takes isDark from the parent instead of inheriting a .dark ancestor class; onIsDarkChange is accepted and never called.
• The demo's sidebar icon is an inline SVG instead of Hugeicons.
• Port-only export: INLINE_THUMBNAIL_SIDEBAR_MIN_WIDTH, the shell width at which the sidebar switches from overlay to inline (upstream keeps it private).

Back to all components