Installation

Barrel

Granular

Usage

The Flow components work together to create directed flow diagrams. Use
`Flow` as the container,
`Flow.Node` for individual
steps, and
`Flow.Parallel` to create
branching paths.

export default function Example() {
  return (
    <Flow>
      <Flow.Node>Step 1</Flow.Node>
      <Flow.Node>Step 2</Flow.Node>
      <Flow.Node>Step 3</Flow.Node>
    </Flow>
  );
}

Examples

Sequential Flow

A simple linear flow with nodes connected in sequence.

Parallel Branches

Use Flow.Parallel to create branching paths that run in parallel.

Custom Node Styling

Use the render prop to completely customize node appearance. The render prop accepts a React element that will be used instead of the default styled node.

Centered Alignment

Use the align prop to vertically center nodes. This is useful when nodes have different heights.

Complex Flow

Combine sequential and parallel nodes to build complex workflows.

Custom Anchor Points

By default, connectors attach to the center of each node. Use Flow.Anchor with its render prop to specify custom attachment points. The type prop controls whether the anchor serves as a "start" point (where connectors leave) or "end" point (where connectors arrive).

Panning Large Diagrams

When a diagram exceeds its container, Flow automatically enables panning. Drag to pan the viewport, or use the scroll wheel. Scrollbars appear on hover to indicate available scroll area.

Disabled Nodes

Use the disabled prop on a node to visually indicate it's inactive. Connectors linking to disabled nodes are rendered with reduced opacity.

Parallel Node Alignment

Use the
`align` prop on
`Flow.Parallel`
to control how nodes with different widths are aligned. Use
`"start"`
(default) to align left, or
`"end"` to align
right.

Known Issue: Sidebar / Layout Shift

Toggling the sidebar shifts the Flow container's viewport position. Because
connector coordinates are computed from stale `getBoundingClientRect` values
stored in state (captured before the layout shift), the connector lines jump
out of alignment until the next remeasure is triggered. Scroll the page
while the sidebar is open to hit the same bug via the scroll path.

Other Examples

Nested Node Lists in Parallel

Use
`Flow.List`
inside
`Flow.Parallel`
to create parallel branches where each branch contains a sequence of connected
nodes.

Components

Flow

The root container for flow diagrams. Provides panning and scrolling for large diagrams.

Flow.Node

A single node in the flow diagram. Renders as a styled card with automatic connector points. Use the render prop to customize the element.

Flow.Anchor

A component that marks a custom attachment point for connectors within a Flow.Node. Use this to control exactly where connector lines attach instead of the default node center by providing a custom element via the render prop.

Flow.Parallel

A container for parallel branches. Child Flow.Node components are displayed in parallel with junction connectors.

Flow.List

A container for a sequence of Flow.Node components with automatic
connectors between them. Use inside Flow.Parallel to create branches
with multiple sequential steps.


<table class="w-full">
  <thead>
    <tr class="border-b border-kumo-hairline">
      <th class="px-4 py-3 text-left font-semibold">Prop</th>
      <th class="px-4 py-3 text-left font-semibold">Type</th>
      <th class="px-4 py-3 text-left font-semibold">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-b border-kumo-hairline">
      <td class="px-4 py-3 font-mono">children</td>
      <td class="px-4 py-3 font-mono">ReactNode</td>
      <td class="px-4 py-3">Flow.Node components to display in sequence</td>
    </tr>
  </tbody>
</table>