FlowDiagram

An animated walk through one automated run.

DesktopPhone

View code

tsx

<FlowDiagram
	aria-label="A deploy, step by step"
	pauseLabel="Pause the animation"
	trigger={{
		icon: <GitBranchIcon size={14} aria-hidden="true" />,
		title: "A push to main starts a deploy",
		detail: "Every commit, in order",
	}}
	steps={[
		{ title: "Install", code: "bun install --frozen-lockfile" },
		{ title: "Check", code: "bun check" },
		{ title: "Test", code: "bun run test" },
		{ title: "Ship", code: "sdxc deploy" },
	]}
	outcome="Deployed"
	footnote={
		<>
			<BellIcon size={14} aria-hidden="true" />
			A failed step pages the on-call
		</>
	}
/>

Demo landings

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { FlowDiagram } from "@sdxc/ui/landing";

Renders the run as an ordered list on a raised surface inside a MotionLoop. Without motion, or before the animation starts, every step shows as passed, so the static picture is the finished run. Two diagrams with the same step count share keyframes.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`"aria-label"`	`string`	Yes	Accessible name of the run's list. Required — the library ships no copy.
`pauseLabel`	`string`	No	Accessible name of the pause toggle.
`trigger`	`Trigger`	Yes
`steps`	`readonly Step[]`	Yes	The steps, in run order.
`outcome`	`RemixNode`	Yes	The result badge that appears once the last step passes, such as "Run passed".
`footnote`	`RemixNode`	No	A note across from the outcome, such as what happens on failure.

Also accepts everything in Omit<TagProps<"div">, "children">.