Blueprint Process Section

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<BlueprintProcessSection />

Installation

npx shadcn@latest add https://webberui.com/r/blueprint-process-section.json

Usage

Describe the process as a steps array; the component numbers each step as station 01…n automatically and draws the rail, leader lines, dimension callouts, and section marks in order as it scrolls into the viewport.

import { BlueprintProcessSection } from "@/components/ui/blueprint-process-section";

<BlueprintProcessSection
  eyebrow="How it works"
  title="Four steps to the drawing"
  description="Follow the rail station by station, the way you would read an engineering blueprint."
  steps={[
    { title: "Survey and requirements", description: "Start measuring from semantic tokens." },
    { title: "Tracing and prototype", description: "Turn the sketch into a running prototype." },
    { title: "Assembly and integration", description: "The source lands straight in your project." },
    { title: "Ship and sign-off", description: "reduced-motion support is built in." },
  ]}
/>;

Nested scroll container

If the component sits inside a custom overflow-y-auto container, pass that container's ref to root so viewport detection uses the container (rather than the whole window) as its basis:

const scrollerRef = React.useRef<HTMLDivElement>(null);

<div ref={scrollerRef} className="h-[300px] overflow-y-auto">
  <BlueprintProcessSection root={scrollerRef} steps={steps} />
</div>;

Labels and icons

Each step can override the tag on its dimension callout plate (STEP 0n by default) and bring in a lucide icon through icon:

import { Ruler } from "lucide-react";

<BlueprintProcessSection
  steps={[
    { title: "Survey", tag: "A-01", icon: <Ruler />, description: "…" },
  ]}
/>;

Props

BlueprintProcessSection

BlueprintStep

How it works

• Each station measures the real pixel dimensions of its own row with a ResizeObserver, and the annotation layer <svg> maps coordinates 1:1 through its viewBox, so circles and tick marks never distort when scaled.
• The rail, dimension callouts, and section marks appear one by one as pathLength draws from 0 to 1; the dashed leader lines instead expand from the node toward the drawing frame with scaleX, which preserves the dash pattern (pathLength would override strokeDasharray).
• The rail runs through the full height of a row and joins seamlessly between rows, with short cap lines added at the top of the first row and the bottom of the last, so it reads as one continuous measurement datum line.
• The graph-paper ground switches its light/dark grid line color through the CSS variable --wb-grid, and the grid spacing is controlled by gridSize.

Accessibility

• The steps are laid out semantically as <ol> / <li> with <h3> titles, so the reading order is the station order; the annotation layer (rail, leader lines, dimensions, section marks) is decorative (aria-hidden) and does not interfere with screen readers.
• Node numbers, labels, and section codes are all drawn inside the decorative <svg>; the semantics are carried by the list order and the headings, so nothing is announced twice.
• When the user has "reduce motion" enabled at the system level, all annotations are shown directly in their final state with no drawing animation, and the content and layout are completely unchanged.