Diagram Connector
An SVG arrow connector with solid, dashed, or animated variants for linking diagram nodes.
Preview
Import
import { DiagramConnector } from "@sigil-ui/components";Usage
<div className="flex flex-wrap items-center justify-center gap-4"><DiagramNode label="Client" /><DiagramConnector direction="horizontal" label="HTTPS" length={100} /><DiagramNode label="API" /></div>Variants
<DiagramConnector variant="solid" />
<DiagramConnector variant="dashed" />
<DiagramConnector variant="dashed-animated" />Vertical direction
<DiagramConnector direction="vertical" length={80} />With label
<DiagramConnector label="HTTPS" length={100} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "solid" | "dashed" | "dashed-animated" | "dashed-animated" | Line style |
direction | "horizontal" | "vertical" | "horizontal" | Arrow direction |
label | string | — | Text label along the connector |
length | number | 60 | Length in pixels |
strokeColor | string | var(--s-border-strong) | Custom stroke color |
arrowSize | number | 6 | Arrowhead size in pixels |
className | string | — | Additional CSS classes |
Plus all standard <svg> HTML attributes.