Layoutregistry/ui/sheet.tsx/r/sheet.json

Sheet

Top-level storyboard container with top-edge registration pegs and 32px scene-change vertical rhythm.

← All Components

Light · Paper.f12-theme-light

Interactive preview

Sheet PreviewRegistration pegs + 32px scene flow

A Sheet wraps scenes with top registration pegs and paper/flashback surfaces.

Dark · Flashback.f12-theme-dark

Interactive preview

Sheet PreviewRegistration pegs + 32px scene flow

A Sheet wraps scenes with top registration pegs and paper/flashback surfaces.

Install & copy-in source

shadcn CLI (sheet.json)

npx shadcn@latest add https://frame12.dev/r/sheet.json

Usage example (Sheet)

import { Sheet, Scene, Panel } from '@/components/frame12';

export function OverviewSheet() {
  return (
    <Sheet pegs motion="stepped">
      <Scene gutter="scene" layout="stack">
        <Panel label="Establishing frame">
          <p>Storyboard sheet content</p>
        </Panel>
      </Scene>
    </Sheet>
  );
}

WCAG AAAccessibility guarantees

Accessibility notes

Registration pegs are marked aria-hidden="true" so assistive technologies skip decorative punch-holes.
Automatically honors prefers-reduced-motion: reduce by switching stepped transitions to instant cuts.

GrammarFRAME/12 rules

Design grammar

Establishes a 32px (--f-gutter-change) vertical gap between the header and each Scene.
Frames the white paper sheet (--f-sheet) against the outer worktable desk (--f-desk).

Props & TypeScript API

Exported from @/components/frame12 (registry/ui/sheet.tsx)
Prop	Type	Default	Description
`pegs`	`boolean`	`true`	Renders the three animation registration peg punch-holes along the top edge.
`motion`	`'stepped' \| 'smooth' \| 'cut'`	`'stepped'`	Sets the active motion grammar class (.f12-m-stepped, .f12-m-smooth, or .f12-m-cut).
`theme`	`'light' \| 'dark' \| undefined`	`undefined`	Optional explicit theme override (.f12-theme-light or .f12-theme-dark).
`sheetClassName`	`string`	`''`	Additional class names applied to the inner .f12-sheet surface.