Blueprint Panel

A container surface with a technical, schematic aesthetic — a measurement grid behind the content, L-shaped registration ticks in each corner, and optional mono label / dimension annotations. Built on the vandoko-shape-tokens corner-shape idiom (--shape-radius) and themed entirely through var(--border) / var(--brand-cyan) tokens. Wrap any content to give it a blueprint frame.

Installation

Installs the vandoko-shape-tokens base for the corner-shape profile. The panel renders correctly even without it (border-radius fallback).

Usage

import { BlueprintPanel } from "@/components/blueprint-panel";

export default function Page() {
  return (
    <BlueprintPanel label="VDK-PANEL-01" dimension="240 × 160">
      <p>Any content gets a schematic measurement frame.</p>
    </BlueprintPanel>
  );
}

Props

Features

• Measurement grid — Radial-masked grid lines via --blueprint-grid (defaults off var(--border))
• Corner registration ticks — L-shaped cyan ticks via --blueprint-tick
• Dimension annotations — Mono label / dimension callouts via --blueprint-annotation
• Shape-token aware — Corner profile follows --shape-radius from vandoko-shape-tokens
• Token-only theming — No oklch literals; new --blueprint-* tokens ship via the registry

Lineage