Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · Productions

MonitorBar

MonitorBar is the bar under the editor's picture: the transport, the timecode, the edit buttons and what sits at the end.

@anicanon/sakuga/anicanonkitv1.0Used onWebFrom AniCanon™

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

MonitorBar is made for the web, and isn’t part of Sakuga for iOS yet.

Android

Web only

MonitorBar is made for the web, and isn’t part of Sakuga for Android yet.

Not for

Guidelines

  • slot="transport" holds play and the frame steps; timecode follows it; the edit buttons go in as children; slot="end" holds what sits at the right (zoom, fit).
MonitorBarExample.jsxReact
import { Button } from '@anicanon/sakuga/ui';
import { MonitorBar } from '@anicanon/sakuga/anicanonkit';

export default function MonitorBarExample() {
  return (
    <MonitorBar timecode="2:41 + 04f">
      <Button variant="ghost" size="sm">
        Split
      </Button>
      <Button variant="ghost" size="sm">
        Trim
      </Button>
    </MonitorBar>
  );
}

PropsMonitorBarProps

timecode
string
children
ReactNode
Slots: transport, end. Children are the edit buttons.
MonitorBarExample.swiftiOS · coming soon
MonitorBarExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Space and shape

monitor-bar-gap
gap-sm
6px
monitor-bar-sep-width
line-hairline
1px
monitor-bar-sep-height
its own value
16px
monitor-bar-sep-margin-x
gap-xs
4px

Type

monitor-bar-font
text-small-strong
600 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

Checked automatically with axe-core 4.11.4 against WCAG 2.2 A and AA, on the live preview above, in light and dark, on 26 October 2026.

Result
No issues found, in light or in dark.
By design
A row with no role of its own: its buttons are in order (transport, edit buttons, end), the timecode is read as text and the separator is hidden.
Not tested
The automated check doesn't test keyboard use, focus order or what a screen reader says. The lines above are the design system's own account of them.