Workflow network

Code

import { WorkflowNetwork } from "@fadymondy/nasaq/web";export function Refunds() {  return (    <WorkflowNetwork      title="Refund requests"      steps={[        { id: "ask", title: "Customer asks", owner: "Customer" },        { id: "check", title: "Within 14 days?", kind: "decision" },        { id: "review", title: "Manager reviews", kind: "human", owner: "Support" },        { id: "pay", title: "Refund issued", kind: "output" },      ]}      links={[        { from: "ask", to: "check" },        { from: "check", to: "pay", label: "Yes" },        { from: "check", to: "review", label: "No" },        { from: "review", to: "pay", label: "Approved" },      ]}    />  );}

Workflow · beta

Live examples and controls: Workflow network in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/workflow-network.json

A process explained as cards joined by connectors: who does what, where a decision branches, where it ends. It is for showing a workflow, not editing one, so it is light (no graph library), prints well and reads right to left in Arabic. Use it in documentation, onboarding, approval explainers and presentations.

When to useCopy Anchor Link

• Explaining how a process works to the people who take part in it.
• A workflow summary next to a run or a policy.

When not to useCopy Anchor Link

• Building or configuring a workflow: use WorkflowCanvas.
• A strictly linear list of steps to walk through: use Stepper.

ImportCopy Anchor Link

import { WorkflowNetwork } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { WorkflowNetwork } from "@fadymondy/nasaq/web";

export function Refunds() {
  return (
    <WorkflowNetwork
      title="Refund requests"
      steps={[
        { id: "ask", title: "Customer asks", owner: "Customer" },
        { id: "check", title: "Within 14 days?", kind: "decision" },
        { id: "review", title: "Manager reviews", kind: "human", owner: "Support" },
        { id: "pay", title: "Refund issued", kind: "output" },
      ]}
      links={[
        { from: "ask", to: "check" },
        { from: "check", to: "pay", label: "Yes" },
        { from: "check", to: "review", label: "No" },
        { from: "review", to: "pay", label: "Approved" },
      ]}
    />
  );
}

AnatomyCopy Anchor Link

WorkflowNetwork                 data-slot="workflow-network"   <figure>
├─ heading, caption
├─ svg                          connectors (aria-hidden), arrowheads, optional draw-in
├─ rows                         flex rows of cards, wrapped and balanced
│  └─ card                      data-step="id" data-kind="decision"   <div>, or <button> with onStepClick
└─ connector labels             pills on the connectors

APICopy Anchor Link

WorkflowNetworkCopy Anchor Link

ExamplesCopy Anchor Link

Jumping linksCopy Anchor Link

A link that skips over cards on its row arcs above them; in a single column it is routed round the side. No configuration is needed.

Clickable stepsCopy Anchor Link

<WorkflowNetwork steps={steps} onStepClick={(s) => openDetails(s.id)} highlight={current} />

AccessibilityCopy Anchor Link

• Connectors are decorative; the order is the DOM order of the cards, and a screen-reader line states the step count.
• With onStepClick each card is a real button with a visible focus ring.
• Kinds are not colour only: each has its own icon shape and a text badge.
• Motion is off with prefers-reduced-motion.

RTL & i18nCopy Anchor Link

• Rows are ordinary flex rows, so in Arabic the first step is on the right and the flow runs right to left. Connectors are measured from the rendered cards and always meet them.
• The default step arrow mirrors; kind icons do not. Kind badge text is localised (en and ar) and can be overridden with labels.
• Step titles and owners are yours to localise.

Styling & tokensCopy Anchor Link

• Cards bg-card with border-border; decision border-nq-accent/60, human border-dashed, system bg-secondary, output border-nq-brand/50. Highlight uses nq-brand.
• Target [data-slot=workflow-network] [data-kind=decision]. Never use raw hex.

Do / Don'tCopy Anchor Link

• Do keep titles to a few words and put detail in description.
• Do keep steps in reading order; layout follows the array.
• Don't use it for more than about a dozen steps; split the process instead.

RelatedCopy Anchor Link

• WorkflowCanvas · Stepper · Timeline

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-workflow-workflow-network--docs