Connection Line

ConnectionLine

A subtle dotted connector with optional endpoint dots. Use it to visually link related cards in flows, steppers, timelines, or relationship diagrams.

Basic Usage

import ConnectionLine from '@site/src/components/Layout/ConnectionLine';

<ConnectionLine direction="horizontal" />
<ConnectionLine direction="vertical" withDots={false} />

Props

Prop	Type	Default	Description
direction	'horizontal' | 'vertical'	'horizontal'	Orientation of the line. Vertical needs a height-providing parent.
withDots	boolean	true	Show small dots at each end of the line.
className	string	-	Additional class name on the root span.
style	object	-	Inline style passed to the root span (useful for setting custom length).

Live Preview

Horizontal

AB

Vertical

AB

Notes

• Color is derived from a CSS custom property --connection-color that you can override on the parent for theming.
• The line is decorative; the component sets aria-hidden="true".