# UI Overview

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

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

- Requested language: `en-US`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

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

---

`@univerjs-pro/boards-ui` provides the licensed browser canvas for Univer Boards. It renders the scene, selection and viewport interactions, toolbars, context menus, text editing, shape editing, connector editing, and UI for supported Board element types.

## Register the Board UI

Configure `UniverLicensePlugin` before the Board plugins. Docs, Drawing, Ink, and Shape Editor packages are technical rendering and editing dependencies; using Boards does not require prior knowledge of those products.

```ts
univer.registerPlugin(UniverLicensePlugin, {
  license: process.env.CLIENT_LICENSE_TEXT,
})
univer.registerPlugin(UniverBoardsPlugin)
univer.registerPlugin(UniverBoardsUIPlugin, {
  workbench: {
    content: true,
    header: false,
    headerMenu: false,
    toolbar: false,
    footer: false,
  },
  interaction: {
    minZoomRatio: 0.1,
    maxZoomRatio: 4,
    wheelZoomWithModifier: true,
    trackpadPanEnabled: true,
  },
})
```

See [Installation & Basic Usage](https://docs.univer.ai/guides/boards/getting-started/installation.md) for the complete dependency, style, and locale registration order.

## Canvas options

`IUniverBoardsUIConfig` also controls grid appearance, insert defaults, available shapes and sticky-note colors, toolbar tools, viewport bars, render adapters, and settings such as quick add, precise selection, dimensions, and collaborator cursors.