Workflow edge
Pure-SVG curved connector between two workflow ports. Tone signals state; dashed + animated suggests in-flight data.
Included in the single kansho full pack. Components are not offered as separate installs.
Tone variants
Idle, active, success, warning, errorStyle + motion
Routing
Vertical, diagonal, return-loopComponent documentation
Workflow Edge
components/workflow/workflow-edge.tsxPurpose
Draws a curved SVG connection with optional label, arrow, animation, style, and tone.
Appropriate use
Use inside an SVG workflow surface after the host has calculated endpoint coordinates.
Example
components/workflow/workflow-edge.tsx has a representative live example in the "Tone variants" section on /components/workflow-edge.
States
Tones are idle, active, warning, error, and success; styles are solid or dashed, with optional arrow, label, offset, and animation.
API and props
WorkflowEdge accepts from, to, tone, edgeStyle, animated, label, labelOffsetY, arrow, className, and ariaLabel.
Dependencies
Direct imports are React and cn.
Accessibility
A non-idle edge receives an automatic tone-based accessible name and image role unless ariaLabel overrides it; an idle edge without ariaLabel has no accessible name, while visible labels remain text.
Limitations
It does not route around nodes, validate geometry, prevent marker-id collisions outside its generated ids, or explain an idle unlabeled edge non-visually.
Source
Source: components/workflow/workflow-edge.tsx.
Full pack
components/workflow/workflow-edge.tsx is documented at /components/workflow-edge and installs only through the single Kansho full pack; no individual component install is offered.