Connector

Examples #

'use client';

import { Connector } from '@coreux/ui';

export default function Curved() {
  return (
    <figure style={{ margin: 0, boxSizing: 'border-box', width: 328, padding: 24, background: '#F4F1E9', color: '#0B1221', fontFamily: 'Switzer, sans-serif' }}>
      {/* This copied wrapper owns node placement in the SVG's pixel coordinate space. */}
      <div aria-hidden="true" style={{ position: 'relative', width: 280, height: 140 }}>
        <Connector width={280} height={140} start={{ x: 20, y: 100 }} end={{ x: 260, y: 30 }} path="curved" arrowhead label="Automates" />
        <span style={{ position: 'absolute', left: 16, top: 96, width: 8, height: 8, borderRadius: '50%', background: 'currentColor' }} />
        <span style={{ position: 'absolute', left: 256, top: 26, width: 8, height: 8, borderRadius: '50%', border: '2px solid currentColor', boxSizing: 'border-box' }} />
        <span style={{ position: 'absolute', left: 0, top: 113, fontSize: 13 }}>Intake</span>
        <span style={{ position: 'absolute', right: 0, top: 0, fontSize: 13 }}>Reports</span>
      </div>
      <figcaption style={{ marginTop: 16, fontSize: 14, lineHeight: 1.5 }}>
        Illustrative workflow: intake automation prepares reports.
      </figcaption>
    </figure>
  );
}

Usage #

Use Connector to show one relationship in a manually composed diagram. Curved, Straight, and Orbital retain the seed anchors, dimensions, and path options. Their copied wrappers add endpoint labels and a written relationship; OnDark demonstrates supported dark appearance.

straight connects anchors with a line; curved uses a cubic Bézier; orbital uses a quadratic arc. Orbital is not a closed orbit. An optional arrowhead points toward end; without one, communicate an undirected relationship. A dashed stroke has no inherent semantic meaning.

The wrapper owns node positions. For a larger diagram, place nodes and the SVG in the same coordinate space and calculate anchors yourself. Connector does not find DOM nodes, route around obstacles, attach to moving elements, or provide an editor or automatic layout engine.

Text & geometry limits #

width and height are required finite numbers greater than 0, in CSS pixels. start and end each require finite x/y values inside the inclusive rectangle 0–width by 0–height, with distinct coordinates. The origin is the top left, x increases rightward, and y increases downward.

Curved and orbital controls are derived from the anchors and canvas. The implementation tries the opposite bend or clamps controls if needed to stay inside. This does not guarantee that labels, arrowheads, or strokes remain inside the canvas or avoid other content. The SVG uses overflow: visible.

An optional label must be one non-blank string with no LF or CRLF line break and at most 24 JavaScript UTF-16 code units, measured with String.length. Some emoji use two code units. It is centered at the computed path midpoint in a 28 px high pill with an estimated width of max(54, label.length × 7 + 20) px. Leave room around it; there is no text measurement or collision check.

path permits straight, curved, or orbital; stroke permits solid or dashed. Both use a 2 px stroke; arrowhead adds a 12 × 10 px triangle oriented along the ending tangent. Unsupported path, stroke, fieldMode, or tone values throw. The public barrel exports the component and anchor types, not its internal geometry helper.

fieldMode is light or dark; tone is neutral, accent, muted, positive, warning, or error. Accent lines use cobalt on light and cornflower on dark; the label uses the corresponding surface/text/border tokens. Supply the surrounding field yourself.

Progress props default to 1 for the completed presentation. Finite inputs clamp to 0–1; NaN and infinities throw. They are scalar controls, not an animation scheduler. Keep the settled defaults for static documentation; respect reduced-motion preferences if you animate them in an application.

Props #

ConnectorAnchor

Accessibility & layout #

The SVG has role="img" and the accessible name “Relationship: [label]”, or “Relationship connector” without a label. That name does not identify both endpoints or explain direction. The examples provide the full relationship in a visible figcaption and hide the redundant diagram, including its endpoint labels, from assistive technology.

When the graphic is your sole explanation, provide an adjacent complete text alternative that identifies the source, destination, and meaning. Do not rely on a line’s position, dash style, or color alone. There is no interaction or general HTML-prop forwarding; use a wrapper for additional semantics.

Coordinates and node labels stay fixed in these complete 328 px examples. Fit to canvas scales the whole composition; Actual size allows contained scrolling. This preview scaling does not calculate new anchors or make the component responsive.

See Capsule for concise node labels and Spacing & shape for video stroke tokens.

See Color for structural and semantic roles. Check contrast against the actual field and preserve written labels alongside color.

Consumer setup #

Browsing, previews, and copying are public. Installing the private @coreux/ui package requires repository read access and permission to use the bundled CoreUX brand fonts.

Follow the one-time installation guide for the pinned Git dependency, Tailwind v4 stylesheet setup, fonts, and troubleshooting. Keep the 'use client' directive in each example; no provider is required.

The quick start walks through a copied StatBlock in a minimal app.

Source & revision #

This reference targets @coreux/ui version 0.1.0 at 06f42fd. Types come from its installed declarations; explanations and defaults are checked against this implementation.

Revision and upgrade notes · Contribution and coverage guide