Components

Sprint Pipeline Feature Band

A full-bleed dark feature band that renders an end-to-end sprint as one horizontal pipeline — stage nodes threaded by a single connector rail with exactly one cyan-active node.

A full-bleed dark feature band that reads as one horizontal pipeline: three to four stage nodes threaded left-to-right by a single continuous connector rail, with exactly one cyan-active node and the rail glowing cyan up to it. It owns the "how a sprint flows end to end" story on the Live Workflow Canvas page.

npx shadcn@latest add @vandoko/vkb-feat-23

Usage

import { VkbFeat23 } from "@/components/vkb-feat-23";

export default function Example() {
  return <VkbFeat23 />;
}

All copy is overridable via props. Pass a stages array where each item has title, outcome, and an optional active flag (the lone active: true stage renders cyan and the rail glows up to it):

<VkbFeat23
  eyebrow="How a sprint flows"
  heading="One pipeline, end to end."
  stages={[
    { title: "Scope", outcome: "We map the outcome and the riskiest unknown first." },
    { title: "Build", outcome: "Production code ships behind a flag.", active: true },
    { title: "Ship", outcome: "We release the outcome and hand you the keys." },
  ]}
  ctaLabel="Start a sprint"
  ctaHref="/contact"
/>
Preview
Open in
Loading preview...

On this page