# Custom Components

- Human documentation: [https://docs.univer.ai/guides/pdfs/ui/components](https://docs.univer.ai/guides/pdfs/ui/components)

- Agent Markdown: [https://docs.univer.ai/guides/pdfs/ui/components.md](https://docs.univer.ai/guides/pdfs/ui/components.md)

- Requested language: `en-US`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

- Source: [pdfs/ui/components.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/pdfs/ui/components.mdx)

---

`UniverPdfsUIPlugin` composes the PDF interface from standard Univer workbench parts.

| Mode                   | Components mounted by the PDF UI plugin                                                                                              |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| Always                 | Page-thumbnail rail in the left sidebar, PDF canvas in the content area, and PDF footer.                                             |
| `editor.enabled: true` | Ribbon and context-menu items, properties inspector, clipboard integration, insertion controls, and editor-specific menu components. |

Setting `editor.enabled` to `false` retains the viewer parts and omits the editor-only components and services.

## PDF component boundary

The React views and component identifiers used for the PDF canvas, thumbnail rail, footer, inspector, table picker, and tool-mode label are internal implementation details. They are not exported from the `@univerjs-pro/pdfs-ui` root entry and are not supported replacement slots.

Do not infer or copy an internal component key to replace these views with `univerAPI.registerComponent`. Use the [PDF Facade guide](https://docs.univer.ai/guides/pdfs/getting-started/facade.md) for supported PDF behavior.

## Add application-level UI beside a PDF

The shared UI Facade can still register an application component and show it in a regular Univer sidebar or dialog. This extends the surrounding application; it does not replace a PDF plugin component.

```tsx
const registration = univerAPI.registerComponent(
  'pdf-help-panel',
  () => <div>PDF workflow help</div>,
)

const sidebar = univerAPI.openSidebar({
  id: 'pdf-help',
  header: { title: 'PDF help' },
  children: { label: 'pdf-help-panel' },
  width: 320,
})

// When the extension is no longer needed:
sidebar.dispose()
registration.dispose()
```

Register the component after the UI Facade has loaded, and dispose both handles when the extension is removed.