@/components/frame12 · shadcn-compatible JSON19 Components · 22 Registry Payloads
Components & adapters
Copy-in React + TypeScript components, motion hooks, and accessible primitive adapters. Every component works standalone with frame12.css and zero external chart or animation libraries.
Bundle · frame12.json14 core components + 5 primitive adapters + useOnTwos hooks + CSS tokens
Install via shadcn CLI
Install full FRAME/12 registry bundle
npx shadcn@latest add https://frame12.dev/r/frame12.json01 · LayoutSheet · Scene · Panel · PanelPair
Storyboard layout & gutters
| Component & Registry | Summary | Inspect |
|---|---|---|
Sheet /r/sheet.json | Top-level storyboard container with top-edge registration pegs and 32px scene-change vertical rhythm. | Inspect → |
Scene /r/scene.json | Responsive CSS Grid layout container enforcing the three legal FRAME/12 gutter widths: 12px (pair), 20px (scene), and 32px (change). | Inspect → |
Panel /r/panel.json | Ink-framed section drawn with a measured SVG mitered polygon (2.5px stroke, 16px slant rise) and top-edge cut number. | Inspect → |
PanelPair /r/panel-pair.json | Couples two related panels vertically across a shared 12px slanted gutter (slant-bottom over slant-top). | Inspect → |
02 · ControlsSegmentedControl · Button · Input · Badge · Tag
Exposure-sheet controls & markers
| Component & Registry | Summary | Inspect |
|---|---|---|
SegmentedControl /r/segmented-control.json | Exposure-sheet cell selector with a mix-blend-mode: difference indicator that steps across cells in 3 held poses. | Inspect → |
Button /r/button.json | Ink-framed action button with immediate offset shadow on hover and primary, secondary, and marker-yellow variants. | Inspect → |
Input /r/input.json | Accessible text input with linked monospace label, optional hint, and marker-flagged error alert. | Inspect → |
Badge /r/badge.json | Bordered marker-yellow badge with ink text and an optional 14-ray SVG impact burst drawn for two frames. | Inspect → |
Tag /r/tag.json | Flat inline highlighter strip (--f-marker background under --f-marker-ink uppercase monospace text). | Inspect → |
03 · Data & ChartsMetric · ToneAreaChart · ToneBarList · ToneSpark · Balloon
Screentone visualizations & speech balloons
| Component & Registry | Summary | Inspect |
|---|---|---|
Metric /r/metric.json | Headline KPI display with stepped count-up on twos, screen-reader polite live region, directional marker delta, and optional ToneSpark slot. | Inspect → |
ToneAreaChart /r/tone-area-chart.json | Screentone halftone area chart with 4-band dot-density fade, speech-balloon peak callout, keyboard/pointer crosshair, and collapsible data table. | Inspect → |
ToneBarList /r/tone-bar-list.json | Interactive ranked comparison list with screentone fill bars, share percentages, and impact-burst leader badge. | Inspect → |
ToneSpark /r/tone-spark.json | Compact daily bar sparkline filled with 45° rotated SVG screentone dots that wipe on twos. | Inspect → |
Balloon /r/balloon.json | Standalone speech-balloon callout with mitered SVG tail and inked marker-yellow target dot. | Inspect → |
04 · Hooks & Primitive AdaptersuseOnTwos · Dialog · Select · Tooltip · DropdownMenu · Table
12fps motion hooks & accessible primitive skins
| Item & Registry | Category | Summary | Inspect |
|---|---|---|---|
useOnTwos /r/use-on-twos.json | Motion Hooks | Core motion hooks (useOnTwos, useCountUp, useChanged, useSize, useReducedMotion) that sample transitions at 12 poses per second (83.33ms per pose). | Inspect → |
Dialog /r/dialog.json | Primitive Adapters | Native modal <dialog> adapter with .showModal(), screentone backdrop, light-dismiss fallback, and sequential cut label. | Inspect → |
Select /r/select.json | Primitive Adapters | Accessible listbox selector adapter with linked label, marker-yellow ▼ caret, and ink-inverted active item. | Inspect → |
Tooltip /r/tooltip.json | Primitive Adapters | Keyboard- and hover-accessible ink-framed tooltip adapter with hard offset shadow. | Inspect → |
DropdownMenu /r/dropdown-menu.json | Primitive Adapters | Ink-framed action menu adapter with keyboard Escape/outside-click dismissal and ink-inverted item focus. | Inspect → |
Table /r/table.json | Primitive Adapters | Semantic data table adapter with uppercase monospace column headers, 2.5px ink header rule, and tabular-nums alignment. | Inspect → |