Skip to content

Flow

GraphFlow

Process diagram with nodes on a dashed arrow. Accent a node to highlight a path.

Command

pnpm dlx shadcn@latest add <origin>/r/graph-flow.json

Optimistic UI

Highlight the node that updates on tap. Mute the server sync step.

[ OPTIMISTIC UI ]
tap
server
update
tap
update
server syncs

Publish path

A linear pipeline. Every node is default tone.

[ PUBLISH PATH ]
write
review
ship

Props

PropTypeDefaultDescription
titlestringCaption drawn on the top edge of the frame.
rowsFlowRow[]Each row is a sequence of nodes.
cornerstring"+"Character at each corner of the frame.
classNamestringPassed to the outer frame.