Sakuga Back to Sakuga
Theme
Sound
Jump to a component

Core · Content

CastStack

Who is in a take, at a glance: their faces overlapping, up to four, then +N for the rest. Each face is ringed in the ground it sits on, so the overlap reads; screen readers hear the names.

@anicanon/sakuga/uiv1.0Used onWeb · iOS · Android

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

CastStack for iOS is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Android

Coming soon

CastStack for Android is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Use it for
The people in a take, a clip or a scene at a glance, beside its name: up to four faces, then +N.
Not for

Guidelines

It sits beside a take's name in a library, a list or a picker, never on the picture.

CastStackExample.jsxReact
import { CastStack } from '@anicanon/sakuga/ui';

const kiko = { name: 'Kiko', image: '/art/eba-cast-kiko.webp' };

const prof = {
  name: 'The Professor',
  image: '/art/eba-cast-the-professor.webp',
};

export default function CastStackExample() {
  return (
    <>
      <CastStack people={[kiko]} />
      <CastStack people={[kiko, prof, { name: 'Ken' }]} />
      <CastStack
        people={[
          kiko,
          prof,
          { name: 'Ken' },
          { name: 'Lisa' },
          { name: 'Smith' },
          { name: 'Toddy' },
        ]}
      />
      <CastStack people={[kiko, prof, { name: 'Ken' }]} size={32} />
    </>
  );
}

PropsCastStackProps

peoplerequired
{ name: string; image?: string; initial?: string; }[]
Each person in it: a picture, or an initial until there is one.
max
numberDefault 4.
Faces shown before +N.
size
numberDefault 24.
Each face, in px.
label
string
Read by screen readers; the names by default.
className
string
CastStackExample.swiftiOS · coming soon
CastStackExample.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

caststack-face-ring-width
line-strong
2px
caststack-face-margin-left
its own value
calc(-1 * 6px)

Type

caststack-face-font-weight
weight-bold
700
caststack-face-font-family
font-sans
Funnel Sans

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
Not focusable; read as one image named by label, or by every person's name joined ("Aiko, Ren and Mio"), including those past max. The faces and the "+N" are hidden behind that name.
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.