Sakuga Back to Sakuga
Theme
Sound
Jump to a component

Core · Containers

Panel

Panel is a Studio card: an AniCanon™ icon, a title, one line that explains it, an optional action, then its controls.

@anicanon/sakuga/uiv1.0Used onWeb

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

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

Android

Web only

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

Use it for
A Studio card that explains itself: an AniCanon™ icon, a title, a one-line subtitle, an optional action, then its controls.
Not for

Guidelines

  • Every Panel explains itself in its subtitle ("Core shot decisions, with a technique library behind them").
  • The header icon comes from the AniCanon™ set and takes panel-icon.
  • Put collapsed settings in rows below Panels rather than opening every Panel at once.
  • The action may be a component: pass it in slot="action" (a close button, Remove).
  • selected marks the one picked among several panels (a take chosen to cast).
PanelExample.jsxReact
import { Button, Panel } from '@anicanon/sakuga/ui';

export default function PanelExample() {
  return (
    <Panel
      icon="camera"
      title="Camera and framing"
      subtitle="Core shot decisions, with a technique library behind them"
      action={
        <Button variant="ghost" size="sm" icon="film">
          Techniques
        </Button>
      }
    >
      <p
        style={{
          margin: 0,
          color: 'var(--text-secondary)',
          font: '400 14px/20px var(--font-sans)',
        }}
      >
        Tiles go here.
      </p>
    </Panel>
  );
}

PropsPanelProps

icon
IconName
title
string
subtitle
string
action
ReactNode
selected
boolean
One choice among several (a take picked).
children
ReactNode
Or slot="action".
className
string

An IconName is any of the names Icon lists.

PanelExample.swiftiOS · coming soon
PanelExample.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

panel-bgPanel: card surface in the Studio.
bg-surfaceneutral-0#ffffff
bg-surfaceneutral-900#111117
panel-borderPanel: card edge.
border-hairlineshade-a08rgba(11,10,16,0.08)
border-hairlinewhite-a06rgba(255,255,255,0.06)
panel-iconPanel: header icon.
accentcamellia-600#c2335f
accentcamellia-400#f4779f
panel-titlePanel: header title.
text-primaryneutral-925#0b0a10
text-primaryneutral-0#ffffff
panel-subtitlePanel: header line under the title.
text-mutedneutral-600#5c5b67
text-mutedneutral-400#a3a3a7

Space and shape

panel-gap
gap-xl
16px
panel-padding
inset-lg
16px
panel-radius
radius-lg
16px
panel-inset-ring-width
line-hairline
1px
panel-head-gap
gap-lg
12px
panel-icon-padding-top
inset-2xs
2px
panel-sub-margin-top
gap-2xs
2px
panel-icon-size
icon-size-md
20px
panel-selected-inset-ring-width
line-strong
2px
panel-forced-selected-width
line-strong
2px

Type

panel-font-family
font-sans
Funnel Sans
panel-title-font
text-label
600 14px/20px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
panel-sub-font
text-caption
500 13px/18px "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
A region named by title, with the title as a level-3 heading that ends in "selected" when selected, and the subtitle as text; the icon is hidden, and the action and controls 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.