Bull-Board
GitHub

    UIConfig

    Applies to: all adapters.

    UIConfig controls the visual shell of the dashboard: title, logo, favicon, locale, polling, misc links. Pass it via setUIConfig() on the server adapter, or forward it through createBullBoard({ options: { uiConfig } }).

    Usage

    import { createBullBoard } from '@bull-board/api';
import { BullMQAdapter } from '@bull-board/api/bullMQAdapter';
import { ExpressAdapter } from '@bull-board/express';

const serverAdapter = new ExpressAdapter();
serverAdapter.setBasePath('/admin/queues');

createBullBoard({
  queues: [new BullMQAdapter(emailQueue)],
  serverAdapter,
  options: {
    uiConfig: {
      boardTitle: 'My Queues',
      boardLogo: {
        path: 'https://cdn.example.com/logo.png',
        width: '120px',
        height: 32,
      },
      miscLinks: [{ text: 'Logout', url: '/logout' }],
      hideRedisDetails: true,
      showMetrics: true,
      hideDocsLink: false,
    },
  },
});

    serverAdapter.setUIConfig({ ... }) directly works the same way, createBullBoard just forwards options.uiConfig to it.

    Fields

    All fields are optional. Defaults are applied by createBullBoard where noted.

    FieldTypeDefaultDescription
    boardTitlestring'Bull Dashboard'Text in the header and <title> tag.
    boardLogo.pathstring—URL or static path to the logo image (required when boardLogo is set).
    boardLogo.widthnumber | string—Logo width (px number or CSS length).
    boardLogo.heightnumber | string—Logo height (px number or CSS length).
    miscLinksArray<{ text: string; url: string }>[]Extra links in the header menu (logout, etc.).
    hideDocsLinkbooleanfalseHide the header Docs icon that links to the bull-board documentation site.
    queueSortOptionsArray<{ key: string; label: string }>—Custom sort keys for the queue list.
    favIcon.defaultstring'static/images/logo.svg'Favicon when the tab is inactive.
    favIcon.alternativestring'static/favicon-32x32.png'Favicon when jobs are active.
    locale.lngstring—Initial i18next language code ('en', 'fr', 'zh_TW').
    dateFormats.shortstring—date-fns format string for timestamps that fall on today.
    dateFormats.commonstring—date-fns format string for timestamps in the current year.
    dateFormats.fullstring—date-fns format string for older timestamps.
    pollingInterval.showSettingboolean—Whether the polling interval selector shows in Settings.
    pollingInterval.forceIntervalnumber—Forces a polling interval in seconds, overriding the user's choice.
    menu.widthstring—CSS width of the left sidebar ('280px').
    sortQueuesbooleanfalseWhen true, sidebar and overview sort queues alphabetically, groups before standalone queues. Users can toggle this in Settings.
    hideRedisDetailsbooleanfalseHides the Redis Details button in the header.
    showMetricsbooleanfalseShows a per-queue throughput chart (completed/failed per minute). Relies on BullMQ/Bull metrics collection — enable metrics on your workers (e.g. metrics: { maxDataPoints: MetricsTime.ONE_WEEK }).
    environment.labelstring—Environment badge text in the header ('production').
    environment.colorstring—Background colour of the environment badge.
    environment.textColorstring—Text colour of the environment badge.
    environment.fontSizestring | number—Font size of the environment badge.

    Header with the amber demo environment badge

    The demo site uses this exact configuration — { label: 'demo', color: '#f59f00', textColor: '#000' }. See it live.

    Source of truth

    The authoritative type is in packages/api/typings/app.d.ts (UIConfig). Defaults live in packages/api/src/index.ts.