# UI Overview

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

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

- Requested language: `en-US`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

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

---

`@univerjs-pro/bases-ui` provides the licensed browser workbench for Univer Bases. It renders the table and view navigation, grid, kanban, calendar, gantt and gallery views, field editors, record detail panel, menus, and selection state.

## Register the workbench

Register the license and formula engines before the Bases plugins. Formula fields use `@univerjs-pro/engine-formula`; they do not require a Sheets application.

```ts
univer.registerPlugin(UniverLicensePlugin, {
  license: process.env.CLIENT_LICENSE_TEXT,
})
univer.registerPlugin(UniverFormulaEnginePlugin)
univer.registerPlugin(UniverProFormulaEnginePlugin)
univer.registerPlugin(UniverRenderEnginePlugin)
univer.registerPlugin(UniverUIPlugin, { container: 'app' })
univer.registerPlugin(UniverBasesPlugin)
univer.registerPlugin(UniverBasesUIPlugin)
```

See [Installation & Basic Usage](https://docs.univer.ai/guides/bases/getting-started/installation.md) for imports, styles, and locale data.

## Configure the initial layout

`IUniverBaseUIConfig` controls the workbench regions and the first table and view shown after startup.

```ts
univer.registerPlugin(UniverBasesUIPlugin, {
  workbench: {
    header: true,
    headerMenu: true,
    content: true,
    leftSidebar: true,
    rightSidebar: false,
    rightPanelMode: 'dock',
  },
  initialState: {
    tableId: 'tasks',
    viewId: 'kanban',
  },
})
```

Use `disableEdit` for a read-only workbench, and use `attachment`, `personOptions`, or `groupOptions` only when the corresponding Base fields need those host-provided values.