# Custom UI

Source: Big Buck Bunny (bigBuckBunny)

Code

```jsx
import * as THEOplayerReactUI from '@theoplayer/react-ui';

const configuration = {
    libraryLocation: '/path/to/theoplayer/',
    license: 'your_theoplayer_license'
};

const source = {
    sources: { src: 'https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8' },
    metadata: {
        title: "Big Buck Bunny"
    }
};

const Spacer = () => {
    return <span style={{ flexGrow: 1 }} />;
};

const App = () => {
    return (
        <THEOplayerReactUI.UIContainer
            configuration={configuration}
            source={source}
            topChrome={
                <THEOplayerReactUI.ControlBar>
                    <span className="my-title">{title}</span>
                </THEOplayerReactUI.ControlBar>
            }
            centeredChrome={<THEOplayerReactUI.PlayButton />}
            centeredLoading={<THEOplayerReactUI.LoadingIndicator />}
            bottomChrome={
                <>
                    <THEOplayerReactUI.ControlBar>
                        <THEOplayerReactUI.TimeRange />
                    </THEOplayerReactUI.ControlBar>
                    <THEOplayerReactUI.ControlBar>
                        <THEOplayerReactUI.PlayButton />
                        <THEOplayerReactUI.MuteButton />
                        <THEOplayerReactUI.VolumeRange />
                        <THEOplayerReactUI.TimeDisplay />
                        <Spacer />
                        <THEOplayerReactUI.LanguageMenuButton menu="language-menu" />
                        <THEOplayerReactUI.SettingsMenuButton menu="settings-menu" />
                        <THEOplayerReactUI.FullscreenButton />
                    </THEOplayerReactUI.ControlBar>
                </>
            }
            menu={
                <>
                    <THEOplayerReactUI.LanguageMenu id="language-menu" />
                    <THEOplayerReactUI.SettingsMenu id="settings-menu" />
                </>
            }
            error={<THEOplayerReactUI.ErrorDisplay />}
        />
    );
};
```

[📜 View full source on GitHub](https://github.com/THEOplayer/web-ui/blob/main/docs/static/open-video-ui/v2/examples/react/custom-ui/demo.html)