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

Panel

Ink-framed section drawn with a measured SVG mitered polygon (2.5px stroke, 16px slant rise) and top-edge cut number.

← All Components

Light · Paper.f12-theme-light

Interactive preview

2.5px Ink PolygonMeasured via ResizeObserver

Recovered revenue

$32,805

Up 17.3% vs prior 7 days

Dark · Flashback.f12-theme-dark

Interactive preview

2.5px Ink PolygonMeasured via ResizeObserver

Recovered revenue

$32,805

Up 17.3% vs prior 7 days

Install & copy-in source

shadcn CLI (panel.json)

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

Usage example (Panel)

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

export function RevenuePanel() {
  return (
    <Panel label="Recovered revenue">
      <Metric label="Recovered revenue" value={120054} format={fmtCurrency} big />
    </Panel>
  );
}

WCAG AAAccessibility guarantees

Accessibility notes

The SVG polygon border and cut badge carry aria-hidden="true" so screen readers announce the semantic content cleanly.
Uses ResizeObserver on layout offsetWidth/offsetHeight so borders stay crisp at any viewport size.

GrammarFRAME/12 rules

Design grammar

Cut numbers must increment sequentially (C-01, C-02, C-03…) in reading and DOM order.
Never replace Panel with a rounded card or drop-shadow box.

Props & TypeScript API

Exported from @/components/frame12 (registry/ui/panel.tsx)
Prop	Type	Default	Description
`cut`	`string`	`undefined`	Sequential cut label (C-01, C-02…) set into the top ink frame line.
`shape`	`'rect' \| 'slant-bottom' \| 'slant-top'`	`'rect'`	Polygon geometry: rectangular or 16px diagonal slant along bottom/top edge.
`label`	`string`	`undefined`	Accessible aria-label applied to the underlying <section> element.