# Install and initialize MKCustomUI

Use the MKCustomUI plugin to replace the default MKPlayer playback UI with a customizable UI built on Bitmovin Player UI V3.

## 1. Install the plugin

Install the package in your project:

```
npm install @mediakind/mkplayer-customui-plugin
```

## 2. Import the plugin

Import `MKCustomUI` from the plugin in your source code.

## 3. Disable the default player UI

Set `playerConfig.ui` to `false` when using MKCustomUI:

```
const playerConfig = {

...otherConfigs,

ui: false, // disable default Bitmovin UI

};
```

## 4. Initialize MKPlayer

Create the player instance with your video container and config:

```
const player = new mkplayer.MKPlayer(videoContainer, playerConfig);
```

## 5. Initialize MKCustomUI

Create `MKCustomUI` with the initialized player instance:

```
const mkCustomizeUI = new mkplayercustomuiPlugin.MKCustomUI(player);
```

## 6. Release an existing UI manager before rebuilding

If you rebuild or switch UI layouts dynamically, release the previous `uiManager` first:

```
if (uiManager) {

uiManager.release();

uiManager = undefined;

}
```

This avoids duplicate controls and prevents memory leaks when switching UI variants.