Live customer signal
Product events, support themes and account context.
Workflow Map
A free branching workflow feature section for Next.js and React.
From signal to shipped decision
Every input is normalised, routed and verified before it reaches the team.
- Input
Capabilities
- 01
Normalise
Turn every source into one dependable event shape.
- 02
Route
Send high-value signals to the team that owns the decision.
- 03
Verify
Attach evidence and confidence before work enters the queue.
- Outcome
Release-ready decision
A prioritised action with context, owner and proof.
Customise
1.2s
Code
<WorkflowMap
title="From signal to shipped decision"
description="Every input is normalised, routed and verified before it reaches the team."
source={{
title: "Live customer signal",
description: "Product events, support themes and account context.",
}}
branches={[
{
id: "normalise",
title: "Normalise",
description: "Turn every source into one dependable event shape.",
},
{
id: "route",
title: "Route",
description: "Send high-value signals to the decision owner.",
},
{
id: "verify",
title: "Verify",
description: "Attach evidence before work enters the queue.",
},
]}
destination={{
title: "Release-ready decision",
description: "A prioritised action with context, owner and proof.",
}}
/>Workflow Map is a free feature section for Next.js and React that connects one input to parallel capabilities and one clear outcome. Its Tailwind layout uses semantic lists and fixed CSS tracks, while Motion traces orthogonal DOM connectors without measuring the page.
The server, no-JavaScript and reduced-motion versions keep every node and connector fully visible in the same source-to-outcome reading order.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/feat-workflow-mapUsage
import { WorkflowMap } from "@/components/feat-workflow-map";
export default function Page() {
return (
<WorkflowMap
title="From signal to shipped decision"
description="Every input is normalised, routed and verified before it reaches the team."
source={{
title: "Live customer signal",
description: "Product events, support themes and account context.",
}}
branches={[
{
id: "normalise",
title: "Normalise",
description: "Turn every source into one dependable event shape.",
},
{
id: "route",
title: "Route",
description: "Send high-value signals to the decision owner.",
},
{
id: "verify",
title: "Verify",
description: "Attach evidence before work enters the queue.",
},
]}
destination={{
title: "Release-ready decision",
description: "A prioritised action with context, owner and proof.",
}}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | required | Section heading rendered as h2. |
| description | string | undefined | Optional section introduction. |
| source | WorkflowMapEndpoint | required | Workflow entry node with a title, optional description and optional consumer-supplied icon. |
| branches | WorkflowMapBranch[] | required | Two to four parallel capability nodes, rendered in source order. |
| destination | WorkflowMapEndpoint | required | Workflow outcome node with a title, optional description and optional consumer-supplied icon. |
| direction | "forward" | "reverse" | "forward" | Mirrors desktop visual flow and connector origins without changing semantic DOM order. |
| traceDuration | number | 1.2 | Connector trace duration in seconds, with non-finite values falling back to 1.2 and finite values clamped from 0.6 to 2.4. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Workflow Map exposes Tier 3 variables for the connector track, animated trace, endpoint surface and active capability surface. Use direction and traceDuration to change the real routing geometry and choreography, and give meaningful consumer icons their own accessible name.
<WorkflowMap
title="From signal to shipped decision"
source={source}
branches={branches}
destination={destination}
direction="reverse"
traceDuration={1.6}
/>
:root {
--workflow-line: var(--border);
--workflow-trace: var(--primary);
--workflow-node: var(--background);
--workflow-node-active: var(--surface);
}Frequently asked questions
- Is Workflow Map free for commercial use?
- Yes. Workflow Map is MIT licensed, so you can use it in personal and commercial projects without attribution.
- How does Workflow Map handle performance and reduced motion?
- The entrance uses transform and opacity only, starts once when the section enters the viewport and never measures node geometry. Reduced motion, server rendering and no JavaScript all show the complete map immediately with static connectors.
- How do I customise the workflow connectors?
- Set direction to mirror the desktop flow and traceDuration to tune the one-shot draw. Override the workflow-line and workflow-trace custom properties on an ancestor to retheme the fixed connector tracks.