Installation & OnboardingNext.js App Router + TypeScript

Get started with FRAME/12

Go from zero to a verified FRAME/12 storyboard sheet in five steps. Switch between the New Next.js App and Existing Project tracks below.

Step 1 · New Next.js AppZero runtime Google Fonts requests

Scaffold Next.js and bind the three font variables

Create a fresh Next.js App Router project with TypeScript, then load the display, body, and monospace typefaces through next/font/google so fonts are self-hosted at build time.

1a. Create Next.js project

npx create-next-app@latest my-frame12-app --typescript --app --eslint

1b. Configure app/layout.tsx

import { Dela_Gothic_One, Zen_Kaku_Gothic_New, M_PLUS_1_Code } from 'next/font/google';
import '@/styles/frame12.css';

const displayFont = Dela_Gothic_One({ weight: '400', subsets: ['latin'], variable: '--font-f-display', display: 'swap' });
const bodyFont = Zen_Kaku_Gothic_New({ weight: ['400', '500', '700'], subsets: ['latin'], variable: '--font-f-body', display: 'swap' });
const monoFont = M_PLUS_1_Code({ weight: ['400', '500', '700'], subsets: ['latin'], variable: '--font-f-mono', display: 'swap' });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${displayFont.variable} ${bodyFont.variable} ${monoFont.variable}`}>
      <body>{children}</body>
    </html>
  );
}

Step 2 · Registry Install

Add the registry kit

Install the complete kit (frame12.json) or pick individual components into components/frame12/ from frame12.dev (or from your local dev server at http://localhost:3000/r/frame12.json):

Full kit

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

Local dev server install

npx shadcn@latest add http://localhost:3000/r/frame12.json

Step 3 · Stylesheet

Import frame12.css

Every component works standalone with frame12.css. Using Tailwind v4? Import frame12-tailwind.css for @theme token utilities:

Stylesheet registry item

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

Step 4 · First Storyboard ScreenSheet → Scene (gutter="scene", layout="split") → Panel + PanelPair

Compose your first Sheet + Scene + Panel

Number each panel sequentially in reading order starting at cut 01. Place your establishing chart in the wide left column and pair coupled KPIs across a 12px slanted gutter on the right.

Browse 19 Components

app/page.tsx

'use client';

import {
  Sheet,
  Scene,
  Panel,
  PanelPair,
  Metric,
  ToneAreaChart,
  Tag,
  fmtCurrency,
} from '@/components/frame12';

export default function RecoveryPage() {
  return (
    <Sheet pegs motion="stepped">
      <header className="f12-hd">
        <div className="f12-hd-text">
          <p className="f12-eyebrow">Fernwood Supply Co. <Tag>Live</Tag></p>
          <h1 className="f12-title">Revenue recovery</h1>
        </div>
      </header>

      <Scene gutter="scene" layout="split">
        <Panel cut="C-01" label="Recovered revenue over time">
          <Metric label="Recovered revenue" value={120054} format={fmtCurrency} big />
          <ToneAreaChart
            data={[
              { label: 'Oct 29', value: 3820 },
              { label: 'Oct 30', value: 4410 },
              { label: 'Oct 31', value: 5190 },
            ]}
            seriesLabel="Recovered revenue"
            labelColumnHeader="Date"
            formatValue={fmtCurrency}
          />
        </Panel>
        <PanelPair
          top={{ cut: 'C-02', label: 'Incremental profit', children: <Metric label="Incremental profit" value={38420} format={fmtCurrency} /> }}
          bottom={{ cut: 'C-03', label: 'Conversion lift', children: <Metric label="Conversion lift" value={55} format={(v) => `+${Math.round(v)} bps`} /> }}
        />
      </Scene>
    </Sheet>
  );
}

Step 5 · Automated GuardrailsAutomated grammar checks in CI and AI agent loops

Wire check-frame12.mjs and ESLint into your test script

Run node scripts/check-frame12.mjs in CI and enable eslint.frame12.mjs in your editor so hard-coded colors, illegal gutters, marker misuse, and out-of-order cut numbers are caught immediately.

Agent Skill Docs

CLI grammar check

node scripts/check-frame12.mjs src app

ESLint flat config

// eslint.config.mjs
import frame12Rules from './skills/frame12/eslint.frame12.mjs';

export default [
  ...frame12Rules,
];