Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · Writing

Manuscript

Manuscript is the script's page: its tools on top (the block type, where the cursor is), the sections, and what it reports under them (saved, length, Maki's check).

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

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

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

Android

Web only

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

Use it for
The script's page, for episodes and manga issues alike: its tools on top, the numbered sections, and what it reports under them (saved, length, Maki's check).
Not for

Guidelines

  • The body holds ManuscriptSections; the one being written is current. The body is inset alike on both sides and keeps room at its foot, so a current section's fill stays inside the card, clear of the footer.
  • slot="toolbar" and slot="footer" (a StatusBar). label names the script for screen readers.
  • Episodes and manga issues write in the same page.
ManuscriptExample.jsxReact
import { StatusBar, Text } from '@anicanon/sakuga/ui';
import { Manuscript, ManuscriptSection } from '@anicanon/sakuga/anicanonkit';

export default function ManuscriptExample() {
  return (
    <Manuscript label="The Winter script">
      <span slot="toolbar">
        <Text variant="caption">Writing section 4 · @ cast · # places</Text>
      </span>
      <ManuscriptSection number={3} title="Bruce at home">
        Bruce sits on the sofa, the TV on, the snow outside.
      </ManuscriptSection>
      <ManuscriptSection number={4} title="Ten missed calls" current>
        His phone lights up again. Jen. He lets it ring.
      </ManuscriptSection>
      <span slot="footer">
        <StatusBar>
          <span>Saved</span>
          <span>9 sections</span>
        </StatusBar>
      </span>
    </Manuscript>
  );
}

PropsManuscriptProps

childrenrequired
ReactNode
label
string
className
string
ManuscriptExample.swiftiOS · coming soon
ManuscriptExample.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

manuscript-bgManuscript: the script's page.
bg-surfaceneutral-0#ffffff
bg-surfaceneutral-900#111117
manuscript-edgeManuscript: the page's edge.
border-hairlineshade-a08rgba(11,10,16,0.08)
border-hairlinewhite-a06rgba(255,255,255,0.06)
manuscript-ruleManuscript: the rule under its tools.
border-hairlineshade-a08rgba(11,10,16,0.08)
border-hairlinewhite-a06rgba(255,255,255,0.06)

Space and shape

manuscript-radius
radius-xl
24px
manuscript-inset-ring-width
line-hairline
1px
manuscript-tools-gap
gap-lg
12px
manuscript-tools-padding-y
inset-md
12px
manuscript-tools-padding-x
inset-lg
16px
manuscript-tools-border-bottom-width
line-hairline
1px
manuscript-body-padding-top
inset-xl
24px
manuscript-body-padding-right
inset-xl
24px
manuscript-body-padding-left
inset-xl
24px
manuscript-body-gap
gap-2xl
24px
manuscript-body-padding-bottom
gap-lg
12px

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 region named by label (default "Script") with no keyboard handling of its own; its toolbar, sections and footer read and 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.