v2.0Utility

Flow Connector

SVG layout utility that draws a connecting line with an arrowhead between steps in a flow diagram. Horizontal or vertical orientation; stroke and accent colors set via CSS variables.

View source on GitHub

Live preview

Rendered with real component code. Each example demonstrates a documented variant.

Horizontal (default)

See this component used in context in the Threshold reference build.

Step A

Step B

Vertical

Step A

Step B

React props

Configure the component via props in React or via attributes in HTML.

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Controls which SVG variant to render; horizontal shows a sideways dashed connector, vertical shows a downward one
className	string	undefined	Optional extra class name appended to the root element

HTML usage

The HTML variant uses the same shared styles and class names. Drop into any stack.

<link rel="stylesheet" href="path/to/flow-connector/styles.css">

<!-- Horizontal connector (default) -->
<div class="fc fc--horizontal" aria-hidden="true">
  <svg width="48" height="20" viewBox="0 0 48 20" fill="none">
    <line x1="4" y1="10" x2="38" y2="10"
      stroke="var(--fc-line-color)"
      stroke-width="var(--fc-stroke-width)"
      stroke-dasharray="2 3" />
    <circle cx="4" cy="10" r="2" fill="var(--fc-accent-color)" />
    <path d="M 38 6 L 44 10 L 38 14"
      stroke="var(--fc-accent-color)"
      stroke-width="var(--fc-stroke-width)"
      stroke-linecap="round"
      stroke-linejoin="round"
      fill="none" />
  </svg>
</div>

<!-- Vertical connector -->
<div class="fc fc--vertical" aria-hidden="true">
  <svg width="20" height="32" viewBox="0 0 20 32" fill="none">
    <line x1="10" y1="4" x2="10" y2="22"
      stroke="var(--fc-line-color)"
      stroke-width="var(--fc-stroke-width)"
      stroke-dasharray="2 3" />
    <circle cx="10" cy="4" r="2" fill="var(--fc-accent-color)" />
    <path d="M 6 22 L 10 28 L 14 22"
      stroke="var(--fc-accent-color)"
      stroke-width="var(--fc-stroke-width)"
      stroke-linecap="round"
      stroke-linejoin="round"
      fill="none" />
  </svg>
</div>

Customization

Override these CSS custom properties to integrate the component into your brand.

.fc {
  --fc-line-color: var(--brand-muted, #c7ccd4);
  --fc-accent-color: var(--brand-accent, #5b8b85);
  --fc-stroke-width: 1.5;
}