Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · AniCanon™

PremiereSlot

PremiereSlot holds the place of something that is announced but not out yet: the next episode, the next manga issue.

@anicanon/sakuga/anicanonkitv1.0Used onWeb · iOS · AndroidFrom AniCanon™

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

PremiereSlot 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

PremiereSlot 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
Something announced but not out yet: the next episode or the next manga issue, with its premiere time ("Premieres Friday · 21:00") and Remind me.
Not for
  • An episode, short or issue that is outMediaCard
  • A frame of a production that is not made yetThumb
  • A place where there is nothing to show yetEmptyState

Guidelines

  • The dashed premiere-slot-border says "not here yet"; the premiere time is the one premiere-slot-when accent.
  • Times as day and 24-hour time: "Premieres Friday · 21:00".
  • compact in sidebars and on phone. Remind me is an outline Button; pass onRemind={null} to hide it.
  • Pass image when the release already has artwork (a series still or cover): it fills the frame, and the time moves above the title.
  • Where the words would get less than premiere-slot-body-basis (120 px) beside the button, as on a phone or in a side column, Remind me moves to its own row at the end, so the title keeps its room. A title holds to two lines anywhere. Sized by its content, the slot stays on one row.
PremiereSlotExample.jsxReact
import { PremiereSlot } from '@anicanon/sakuga/anicanonkit';

export default function PremiereSlotExample() {
  return (
    <>
      <PremiereSlot
        when="Premieres Friday · 21:00"
        title="Episode 2"
        subtitle="Title revealed at premiere"
      />
      <PremiereSlot compact when="Fri · 21:00" title="EBA · Episode 2" />
    </>
  );
}

PropsPremiereSlotProps

whenrequired
string
titlerequired
string
image
string
Artwork for the frame; without it the frame shows the time.
subtitle
string
compact
boolean
onRemind
MouseEventHandler | null
null hides Remind me.
remindLabel
string
className
string
PremiereSlotExample.swiftiOS · coming soon
PremiereSlotExample.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.

Colour

premiere-slot-borderPremiereSlot: dashed edge.
border-placeholdershade-a24rgba(11,10,16,0.24)
border-placeholderwhite-a22rgba(255,255,255,0.22)
premiere-slot-whenPremiereSlot: premiere day and time.
text-accentcamellia-700#b42354
text-accentcamellia-400#f4779f
premiere-slot-titlePremiereSlot: what premieres.
text-primaryneutral-925#0b0a10
text-primaryneutral-0#ffffff
premiere-slot-framePremiereSlot: empty frame where the artwork will go.
bg-surfaceneutral-0#ffffff
bg-surfaceneutral-900#111117
premiere-slot-subtitlePremiereSlot: the line under the title.
text-mutedneutral-600#5c5b67
text-mutedneutral-400#a3a3a7

Space and shape

premiere-slot-radius
radius-lg
16px
premiere-slot-gap
gap-xl
16px
premiere-slot-padding
inset-md
12px
premiere-slot-edge-width
line-hairline
1px
premiere-slot-frame-width
its own value
160px
premiere-slot-frame-aspect-ratio
ratio-video
16/9
premiere-slot-frame-radius
radius-sm
8px
premiere-slot-frame-padding
inset-sm
8px
premiere-slot-body-gap
gap-2xs
2px
premiere-slot-body-basis
its own value
120px

Type

premiere-slot-font-family
font-sans
Funnel Sans
premiere-slot-when-font-size
text-caption-strong-size
13px
Aa
premiere-slot-when-line-height
text-caption-strong-line-height
18px
premiere-slot-when-font-weight
text-caption-strong-weight
600
premiere-slot-title-font-size
text-subtitle-sm-size
16px
Aa
premiere-slot-title-line-height
text-subtitle-sm-line-height
22px
premiere-slot-title-font-weight
text-subtitle-sm-weight
600
premiere-slot-sub-font-size
text-caption-size
13px
Aa
premiere-slot-sub-line-height
text-caption-line-height
18px

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
When, title and subtitle read as text and the picture is hidden. Tab reaches the Remind me button, announced by remindLabel or one built from title ("Remind me when Episode 4 premieres"), and Enter or Space runs onRemind.
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.