Layoutregistry/ui/scene.tsx/r/scene.json

Scene

Responsive CSS Grid layout container enforcing the three legal FRAME/12 gutter widths: 12px (pair), 20px (scene), and 32px (change).

← All Components

Light · Paper.f12-theme-light

Interactive preview

20px · scene

Left cell in a same-scene grid.

20px · scene

Right cell in a same-scene grid.

Dark · Flashback.f12-theme-dark

Interactive preview

20px · scene

Left cell in a same-scene grid.

20px · scene

Right cell in a same-scene grid.

Install & copy-in source

shadcn CLI (scene.json)

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

Usage example (Scene)

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

export function SplitScene() {
  return (
    <Scene gutter="scene" layout="equal">
      <Panel label="Left frame">Left scene panel</Panel>
      <Panel label="Right frame">Right scene panel</Panel>
    </Scene>
  );
}

WCAG AAAccessibility guarantees

Accessibility notes

Collapses multi-column grids to a single reading-order column below 760px container width.
Preserves DOM order and keyboard tab sequence across desktop and mobile viewports.

GrammarFRAME/12 rules

Design grammar

Arbitrary gaps (8px, 16px, 24px) are forbidden by check-frame12.mjs; always use Scene gutter props.
Use layout="split" (2fr 1fr) when pairing an establishing C-01 panel with a PanelPair.

Props & TypeScript API

Exported from @/components/frame12 (registry/ui/scene.tsx)
Prop	Type	Default	Description
`gutter`	`'pair' \| 'scene' \| 'change'`	`'scene'`	Selects 12px (pair), 20px (scene), or 32px (change) grid gap.
`layout`	`'split' \| 'stack' \| 'equal' \| 'three'`	`'split'`	Grid column template: 2fr/1fr (split), 1fr (stack), 1fr/1fr (equal), or 3-col (three).