Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · Productions

ViewHeader

ViewHeader opens a production view: the view as a quiet eyebrow, the title (one line, cut with an ellipsis), the meta under it, and the view’s actions on the right as children (Maki, then at most one primary).

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

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

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

Android

Web only

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

Use it for
The top of a production view: the view as an eyebrow, the title on one line, the meta under it, and the view's actions on the right (Maki, then at most one primary).
Not for
ViewHeaderExample.jsxReact
import { Button } from '@anicanon/sakuga/ui';
import { ViewHeader } from '@anicanon/sakuga/anicanonkit';

export default function ViewHeaderExample() {
  return (
    <ViewHeader
      eyebrow="Plan"
      title="#5 · Red Line · Sé station"
      meta="4 of 6 cuts approved · 0:52 of 0:55"
    >
      <Button variant="primary" size="sm">
        Approve 2 cuts
      </Button>
    </ViewHeader>
  );
}

PropsViewHeaderProps

titlerequired
string
eyebrow
string
meta
string
children
ReactNode
The view's actions.
className
string
ViewHeaderExample.swiftiOS · coming soon
ViewHeaderExample.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

view-header-gap
gap-lg
12px
view-header-padding-top
inset-xl
24px
view-header-padding-x
inset-xl
24px
view-header-padding-bottom
inset-xs
4px
view-header-words-gap
gap-2xs
2px

Type

view-header-eyebrow-font
text-eyebrow
700 11px/14px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
view-header-eyebrow-letter-spacing
tracking-caps
.06em
view-header-h1-font
text-title-2
700 24px/30px "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
view-header-meta-font
text-caption
500 13px/18px "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
The title is a level-1 heading, with the eyebrow before it and the meta after it read as text; the actions on the right take focus in order.
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.