Theme
Sound
Jump to a component
AniCanonKit · Maki
MakiPanel
MakiPanel is Maki's column: the mascot and name, Chat and Review, the conversation, and the composer. It opens beside the map from the top-bar Maki button.
Live, from @anicanon/sakuga 2.0.0
Sakuga for iOS and Android is coming
iOS
Web only
MakiPanel is made for the web, and isn’t part of Sakuga for iOS yet.
Android
Web only
MakiPanel is made for the web, and isn’t part of Sakuga for Android yet.
- Use it for
- The chat with Maki in its own column beside the map: the mascot and name, Chat and Review, the conversation and the composer, opened from the Maki button in the top bar.
- Not for
- The button that opens itAskMaki
- A Story side panel about a character, place or eventPanelHeader
- One thing Maki saysMakiTurn
Guidelines
onViewswitches Chat and Review,onCloseis Close Maki, and the composer'svalue,onChange,onSend,onAttachandonSuggestionpass through.busyholds the conversation back from screen readers while a turn is still coming in.
import { MakiPanel, MakiTurn } from '@anicanon/sakuga/anicanonkit';
const MAKI = '/art/maki-avatar.png';
export default function MakiPanelExample() {
return (
<MakiPanel avatar={MAKI} review={2} suggestions={['Fix the last train']}>
<MakiTurn avatar={MAKI}>
<p>Two things don’t hold up.</p>
</MakiTurn>
</MakiPanel>
);
}PropsMakiPanelProps
avatarrequiredstringchildrenrequiredReactNodereviewnumberview'Chat' | 'Review'suggestionsstring[]placeholderstringhintstringonView(view: 'Chat' | 'Review') => voidonCloseMouseEventHandlerbusybooleanA turn is still coming in: the conversation waits to be read.
valuestringAs on MakiComposer.
onChange(text: string) => voidonSend(text: string) => voidonAttachMouseEventHandleronSuggestion(suggestion: string) => voidclassNamestringEach 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
maki-nameMaki: the name above Maki's turn.text-accentcamellia-700#b42354text-accentcamellia-400#f4779fmaki-textMaki: message text.text-primaryneutral-925#0b0a10text-primaryneutral-0#ffffffmaki-quote-bgMaki: a quoted line.bg-canvasneutral-50#f6f6f8bg-canvasneutral-950#07070amaki-quote-fgMaki: quoted text.text-secondaryneutral-800#2e2d36text-secondaryneutral-200#dcdcdemaki-dividerMakiPanel: dividers under the header and above the composer.border-hairlineshade-a08rgba(11,10,16,0.08)border-hairlinewhite-a06rgba(255,255,255,0.06)Space and shape
maki-panel-head-gapgap-md8px
maki-panel-head-padding-yinset-md12px
maki-panel-head-padding-xinset-lg16px
maki-panel-head-border-bottom-widthline-hairline1px
maki-panel-head-img-sizeits own value
40px
maki-panel-body-gapgap-lg12px
maki-panel-body-paddinginset-lg16px
maki-panel-composer-padding-topinset-md12px
maki-panel-composer-padding-xinset-lg16px
maki-panel-composer-padding-bottominset-lg16px
maki-panel-composer-border-top-widthline-hairline1px
maki-card-check-icon-sizeicon-size-xs14px
Type
maki-panel-head-b-fonttext-title-4700 17px/22px "Funnel Display", "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
- Tab moves through the view switch (a group named "Maki views" whose Chat and Review buttons read "pressed" on the current one and run
onView), "Close Maki" (onClose), the conversation's controls and the composer, and Maki's face is hidden. The conversation is a log named "Conversation with Maki", so each new turn is read as it arrives, held back whilebusy. - 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.