Jump to a component
AniCanonKit · Characters
Readiness
What a character is ready with, at a glance on their page: looks, voice, face, props. Each part is ticked, or marked when it waits on the creator, with a quiet line under it ("1 waiting on you", "Optional").
Live, from @anicanon/sakuga 2.0.0
Sakuga for iOS and Android is coming
iOS
Coming soon
Readiness 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
Readiness 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
- What a character is ready with, at a glance on their page: looks, voice, face and props, each ticked or marked when it waits on the creator.
- Not for
- A job's stages in order, with their timesStages
- Where a person is in a flow they step throughStepper
- Who a character isCharacterStats
- Wardrobe across the whole castCoverageTable
import { Readiness } from '@anicanon/sakuga/anicanonkit';
export default function ReadinessExample() {
return (
<Readiness
items={[
{ label: '6 looks', detail: '1 waiting on you', state: 'attention' },
{ label: 'Voice cast', detail: 'Shounen Hero' },
{ label: 'Face sheet', detail: 'Plus 1 variant' },
{ label: 'No props', detail: 'Optional' },
]}
/>
);
}PropsReadinessProps
itemsrequired{ label: string; detail?: string; state?: 'done' | 'attention'; }[]labelstringclassNamestringEach 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
readiness-mark-icon-sizeicon-size-xsreadiness-gapgap-xlreadiness-padding-yinset-lgreadiness-edge-top-widthreadiness-edge-bottom-widthreadiness-item-gapgap-mdreadiness-mark-sizeicon-size-mdreadiness-mark-radiusradius-fullType
readiness-font-familyfont-sansreadiness-item-fonttext-caption-strongreadiness-item-small-fonttext-smallMotion
readiness-mark-durationmotion-basereadiness-mark-easingease-standardreadiness-mark-settle-animationmotion-settleChecked 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; a list named by
label(default "Ready"), each item read as its label, then "ready" or "waiting for you", then its detail. - 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.