Layoutregistry/ui/panel-pair.tsx/r/panel-pair.json

PanelPair

Couples two related panels vertically across a shared 12px slanted gutter (slant-bottom over slant-top).

← All Components

Light · Paper.f12-theme-light

Interactive preview

Incremental profit

$10,200

Up 14.3% vs prior 7 days

Conversion lift

+0.48 pp

Down 0.07 pp vs prior 7 days

Dark · Flashback.f12-theme-dark

Interactive preview

Incremental profit

$10,200

Up 14.3% vs prior 7 days

Conversion lift

+0.48 pp

Down 0.07 pp vs prior 7 days

Install & copy-in source

shadcn CLI (panel-pair.json)

npx shadcn@latest add https://frame12.dev/r/panel-pair.json

Usage example (PanelPair)

import { PanelPair, Metric, fmtCurrency, fmtPP } from '@/components/frame12';

export function PairedMetrics() {
  return (
    <PanelPair
      top={{ label: 'Profit', children: <Metric label="Incremental profit" value={38420} format={fmtCurrency} /> }}
      bottom={{ label: 'Lift', children: <Metric label="Conversion lift" value={0.51} format={fmtPP} /> }}
    />
  );
}

WCAG AAAccessibility guarantees

Accessibility notes

Renders top panel before bottom panel in DOM order, matching top-to-bottom reading order.
Adds extra interior padding along the slanted edge so text never collides with the 16px diagonal.

GrammarFRAME/12 rules

Design grammar

Encodes "these two metrics belong together" via a 12px (--f-gutter-pair) slanted gutter.
Always pairs slant-bottom on top with slant-top on the bottom.

Props & TypeScript API

Exported from @/components/frame12 (registry/ui/panel-pair.tsx)
Prop	Type	Default	Description
`top`	`Omit<PanelProps, 'shape'>`	`undefined`	Props and children for the upper slant-bottom panel.
`bottom`	`Omit<PanelProps, 'shape'>`	`undefined`	Props and children for the lower slant-top panel.
`topCut / bottomCut`	`string`	`undefined`	Sequential cut numbers when passing two child elements directly.