SequenceDiagram

An animated sequence diagram.

DesktopPhone

View code

tsx

<SequenceDiagram
	aria-label="A PKCE sign-in, message by message"
	pauseLabel="Pause the animation"
	actors={[
		{ name: "Browser", icon: <MonitorIcon size={14} aria-hidden="true" /> },
		{ name: "Your app", icon: <ServerIcon size={14} aria-hidden="true" /> },
		{ name: "Authorization Server", icon: <KeyRoundIcon size={14} aria-hidden="true" /> },
	]}
	messages={[
		{ from: 0, to: 1, label: "Open the sign-in page", code: "GET /login" },
		{ from: 1, to: 1, label: "Make a code verifier" },
		{ from: 1, to: 0, label: "Redirect with its challenge", code: "302 /authorize" },
		{ from: 0, to: 2, label: "Sign in and consent" },
		{ from: 2, to: 1, label: "Return a one-time code", code: "GET /callback?code=…" },
		{ from: 1, to: 2, label: "Trade code and verifier", code: "POST /token" },
		{ from: 2, to: 1, label: "Issue the tokens" },
	]}
	outcome="Signed in"
	footnote={
		<>
			<LockIcon size={14} aria-hidden="true" />
			No client secret in the browser
		</>
	}
/>

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 { SequenceDiagram } from "@sdxc/ui/landing";

Renders the exchange on a raised surface inside a MotionLoop: an actor row, a lifeline per actor, and one list item per message whose arrow runs between the two lifelines' centres. Without motion every arrow shows drawn, so the static picture is the finished exchange. Two diagrams with the same message 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 message list. Required — the library ships no copy.
`pauseLabel`	`string`	No	Accessible name of the pause toggle.
`actors`	`readonly Actor[]`	Yes	The parties, left to right; two to four fit a phone column.
`messages`	`readonly Message[]`	Yes	The messages, in the order they are sent.
`outcome`	`RemixNode`	No	The result badge that appears once the last message lands, such as "Signed in".
`footnote`	`RemixNode`	No	A note across from the outcome, such as what the exchange protects against.

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