Layout Guides

Dashed column guides drop over a grid, one column fills with a label and a now line slides across

Installation

$ pnpm dlx shadcn@latest add @remocn/layout-guides

Usage

LayoutGuides is a full-frame scene. Dashed guides drop down every column edge left to right. Then one column fills with a tint and gets a label, a gutter is measured, and a marker line slides across the grid with its own label.

tsx

import { LayoutGuides } from "@/components/remocn/layout-guides";
 
export const Grid = () => <LayoutGuides />;

Without children it draws over the demo dashboard's week grid. For your own UI, pass it as children in a 1280×720 frame and describe the grid in frame pixels. Only columns, top and bottom are required.

tsx

import { LayoutGuides } from "@/components/remocn/layout-guides";
 
export const Grid = () => (
  <LayoutGuides
    guides={{
      columns: [160, 400, 640, 880, 1120],
      top: 120,
      bottom: 660,
      highlight: { rect: { x: 400, y: 120, w: 240, h: 540 }, label: "col 2" },
      now: { y: 300, from: 160, to: 1120, label: "Live" },
    }}
  >
    <MyScreen />
  </LayoutGuides>
);

Timing

At 30 fps and speed={1}:

Frames	Motion
8 + n × 3	Guide n drops down over 16 frames
22–36	The highlight traces and fills
28–42	The highlight's header box traces
32–44	The ruler draws and its value pops
34–46	The highlight label pops on
38–54	The now line slides across, its label pops

layoutGuidesLength is 54. speed scales the whole timeline.

Props6

Prop	Type	Default
children	React.ReactNode— UI to lay guides over, in a 1280×720 frame. Without it a demo dashboard is drawn
guides	{ columns: number[]; top: number; bottom: number; highlight?: { rect; label }; ruler?: Measure; now?: { y; from; to; label } }— Column edges, optional highlight, ruler and now line, in frame pixels. Defaults to the demo week grid, or nothing with children
color	string"#335CFF" Guide, highlight and ruler color
nowColor	string"#7D52F4" Now line and label color
background	string"#EDEDEF" Stage color
speed	number1 Playback multiplier

childrenReact.ReactNode
UI to lay guides over, in a 1280×720 frame. Without it a demo dashboard is drawn
guides{ columns: number[]; top: number; bottom: number; highlight?: { rect; label }; ruler?: Measure; now?: { y; from; to; label } }
Column edges, optional highlight, ruler and now line, in frame pixels. Defaults to the demo week grid, or nothing with children
colorstring
Guide, highlight and ruler color
Default"#335CFF"
nowColorstring
Now line and label color
Default"#7D52F4"
backgroundstring
Stage color
Default"#EDEDEF"
speednumber
Playback multiplier
Default1