---
title: "Panels & dialogs — React"
description: "Keep track of which sidebars, dialogs and menus are open, open them from commands, and restore them next time."
framework: "React"
source: "https://www.embedpdf.com/docs/headless/react/ui/panels"
---
# Panels & dialogs
A viewer has sidebars (thumbnails, comments, search), dialogs and menus. The shell plugin keeps track of
which are open, so a toolbar button, a keyboard shortcut and your own code can all open the same
panel, and you can remember the layout for next time. You draw the panels; the plugin only holds their
state. Register `shellPlugin()`:
**`shell-plugin.tsx`**
```tsx
import { shellPlugin } from '@embedpdf/react/shell';
export const plugins = [/* … */ shellPlugin()];
```
Then ask for a panel by name:
**`comments-panel.tsx`**
```tsx
import { useSurface } from '@embedpdf/react/shell';
import { CommentList } from './comment-list';
export function CommentsPanel() {
const panel = useSurface('comments');
if (!panel.isOpen) return null;
return (
);
}
export function CommentsButton() {
const panel = useSurface('comments');
return ;
}
```
The names are yours: `'comments'`, `'thumbnails'`, `'settings'`. Each document keeps its own, so every
tab remembers which panels were open.
## One panel per side
Most layouts show one panel per side. Give panels a group with `exclusive`, and opening one closes the
others in that group:
```ts
shell.open('thumbnails', { exclusive: 'left' });
shell.open('outline', { exclusive: 'left' }); // closes thumbnails
shell.open('comments', { exclusive: 'right' }); // the left panel stays
```
**`sidebars.tsx`**
```tsx
import { useEffect, useState } from 'react';
import { Viewer, DocumentGate } from '@embedpdf/react/runtime';
import type { OpenInput } from '@embedpdf/react/runtime';
import { Stage, stagePlugin } from '@embedpdf/react/stage';
import { RenderLayer, renderPlugin } from '@embedpdf/react/render';
import { SearchLayer, searchPlugin, useSearch, useSearchHits } from '@embedpdf/react/search';
import { shellPlugin, useShell, useSurface } from '@embedpdf/react/shell';
import { localEngine } from '@embedpdf/engine';
import './sidebars.css';
const engine = localEngine();
const plugins = [stagePlugin(), renderPlugin(), searchPlugin(), shellPlugin()];
const ebook = async (): Promise => {
const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
return { kind: 'bytes', id: 'ebook', bytes: new Uint8Array(await response.arrayBuffer()) };
};
// Both panels share the right side: opening one closes the other.
function PanelButton({ id, label }: { id: string; label: string }) {
const panel = useSurface(id);
return (
);
}
function SearchPanel() {
const panel = useSurface('search');
const search = useSearch();
const hits = useSearchHits();
const [text, setText] = useState('PDF');
useEffect(() => {
void search.search({ text });
}, [search, text]);
if (!panel.isOpen) return null;
return (
);
}
function NotesPanel({ notes, onChange }: { notes: string; onChange: (notes: string) => void }) {
const panel = useSurface('notes');
if (!panel.isOpen) return null;
return (