Jump to a component
AniCanonKit · Productions
CutRow
CutRow is one cut (or video, or production) in a CutSheet. Its children are the cells, in column order. selected bands the row (the cut open beside the sheet); changed puts a bar in the margin when it changed since you last read it; span makes one cell run under the row's columns (a Timesheet under its cut).
Live, from @anicanon/sakuga 2.0.0
Sakuga for iOS and Android is coming
A CutRow only exists inside a cut sheet. See it live in CutSheet.
iOS
Web only
CutRow is made for the web, and isn’t part of Sakuga for iOS yet.
Android
Web only
CutRow is made for the web, and isn’t part of Sakuga for Android yet.
- Use it for
- One cut, video or production as a row in a
CutSheet, its cells in column order, banded while it is open beside the sheet.
import { CutRow } from '@anicanon/sakuga/anicanonkit';PropsCutRowProps
selectedbooleanchangedbooleanspanbooleanchildrenReactNodeclassNamestringIt has no tokens of its own: it draws with CutSheet’s, listed here.
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
cutsheet-textCutSheet: cell text.text-primaryneutral-925#0b0a10text-primaryneutral-0#ffffffcutsheet-headCutSheet: column labels.text-mutedneutral-600#5c5b67text-mutedneutral-400#a3a3a7cutsheet-ruleCutSheet: the rule between rows.border-hairlineshade-a08rgba(11,10,16,0.08)border-hairlinewhite-a06rgba(255,255,255,0.06)cutsheet-rule-headCutSheet: the rule under the column labels.border-dividershade-a12rgba(11,10,16,0.12)border-dividerwhite-a12rgba(255,255,255,0.12)cutsheet-selected-bgCutSheet: the selected row.bg-surface-raisedneutral-100#ececf0bg-surface-raisedneutral-875#1a1a21cutsheet-changedCutSheet: the margin bar on a row changed since you last read it.text-primaryneutral-925#0b0a10text-primaryneutral-0#ffffffcutsheet-page-bgCutSheet on its page: the paper.bg-surfaceneutral-0#ffffffbg-surfaceneutral-900#111117cutsheet-page-edgeCutSheet on its page: the page's edge.border-hairlineshade-a08rgba(11,10,16,0.08)border-hairlinewhite-a06rgba(255,255,255,0.06)Space and shape
cut-check-icon-sizeicon-size-xscutsheet-h-padding-rightinset-lgcutsheet-h-padding-bottominset-smcutsheet-h-border-bottom-widthline-hairlinecutsheet-h-first-padding-leftinset-mdcutsheet-row-padding-yinset-lgcutsheet-row-padding-rightinset-lgcutsheet-row-border-bottom-widthline-hairlinecutsheet-row-first-padding-leftinset-mdcutsheet-row-selected-first-radiusradius-mdcutsheet-row-selected-last-radiusradius-mdcutsheet-row-before-changed-first-insetinset-lgcutsheet-row-before-changed-first-widthline-strongcutsheet-row-before-changed-first-radiusradius-fullcutsheet-page-padding-topinset-xlcutsheet-page-padding-xinset-mdcutsheet-page-padding-bottominset-smcutsheet-page-radiusradius-xlcutsheet-page-inset-ring-widthline-hairlinecutsheet-forced-selected-widthline-strongType
cutsheet-font-familyfont-sanscutsheet-h-fonttext-eyebrowcutsheet-h-letter-spacingtracking-capsMotion
cutsheet-row-durationmotion-fastcutsheet-row-easingease-standardChecked 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 table row whose children each become a cell (a plain element takes the cell role unless it has its own; a component such as CutCell, or text, is wrapped in one), read in column order. A
selectedorchangedrow starts its first cell with "Selected" or "changed", said but not shown. - 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.