Is Before After Workflow free for commercial use?

Yes. Before After Workflow is MIT licensed, so you can use it in personal and commercial projects without attribution.

Does the workflow section calculate the result metric?

No. Each workflow receives its own caller-supplied metric label, value and optional unit. The component presents that value and animates the transition between versions without making a business or performance claim.

Can I control which workflow version is selected?

Yes. Use activeVersion with onVersionChange for controlled state, or defaultVersion to let the native radio group manage the initial selection. Both versions and their supplied steps remain visible in the no-JavaScript fallback.

Before After Workflow

A free before-and-after workflow section for Next.js and React.

From handoffs to one clear owner

A sample service process shows how a shared capture step can lead to a shorter, more accountable review path. The comparison uses the supplied sample steps and time values.

Current workflowUpdated workflow

Today

Current workflow

Decision time24hours

Capture the request
An operations lead copies the request into a shared queue.
Triage the case
Support and billing review eligibility in separate passes.
Resolve and record
A second reviewer repeats the check before the case is assigned.

After the change

Updated workflow

Decision time4hours

Capture the request
A single intake form records the source and account owner.
Resolve and record
The reviewer records the outcome with the decision evidence.
Triage the case
Saved rules route the case to one accountable reviewer.

Today

Current workflow

Capture the request
An operations lead copies the request into a shared queue.
Triage the case
Support and billing review eligibility in separate passes.
Resolve and record
A second reviewer repeats the check before the case is assigned.

Customise

Initial workflow

Code

const steps = [
  {
    "id": "capture",
    "title": "Capture the request",
    "before": "An operations lead copies the request into a shared queue.",
    "after": "A single intake form records the source and account owner."
  },
  {
    "id": "triage",
    "title": "Triage the case",
    "before": "Support and billing review eligibility in separate passes.",
    "after": "Saved rules route the case to one accountable reviewer."
  },
  {
    "id": "resolve",
    "title": "Resolve and record",
    "before": "A second reviewer repeats the check before the case is assigned.",
    "after": "The reviewer records the outcome with the decision evidence."
  }
];

const before = {
  "label": "Current workflow",
  "stepIds": [
    "capture",
    "triage",
    "resolve"
  ],
  "metric": {
    "label": "Decision time",
    "value": "24",
    "unit": "hours"
  }
};

const after = {
  "label": "Updated workflow",
  "stepIds": [
    "capture",
    "resolve",
    "triage"
  ],
  "metric": {
    "label": "Decision time",
    "value": "4",
    "unit": "hours"
  }
};

<BeforeAfterWorkflow
  title="From handoffs to one clear owner"
  steps={steps}
  before={before}
  after={after}
/>

Before After Workflow is a free feature section for Next.js and React that compares two caller-supplied process paths, their shared steps and a supplied result metric. Tailwind styles the responsive timeline, while Motion keeps matching step IDs continuous when the selected workflow changes.

Native radios provide keyboard selection and controlled or uncontrolled usage. With JavaScript unavailable the page keeps both complete workflows visible; with reduced motion enabled, every step and supplied metric remains available without spatial animation.

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-before-after-workflow

Usage

import { BeforeAfterWorkflow } from "@/components/feat-before-after-workflow";

export function Example() {
  return (
    <BeforeAfterWorkflow
      title="From handoffs to one clear owner"
      steps={[
        {
          id: "capture",
          title: "Capture the request",
          before: "A team member records the request.",
          after: "The request enters the shared queue.",
        },
        {
          id: "review",
          title: "Review the case",
          before: "Two people review the case in separate passes.",
          after: "One assigned owner checks the details.",
        },
      ]}
      before={{ label: "Current workflow", stepIds: ["capture", "review"], metric: { label: "Review stages", value: "2" } }}
      after={{ label: "Updated workflow", stepIds: ["capture", "review"], metric: { label: "Review stages", value: "1" } }}
      defaultVersion="before"
    />
  );
}

Props

Prop	Type	Default	Description
title	string	required	Section heading rendered as an h2.
description	string	undefined	Optional introduction beneath the section heading.
steps	WorkflowComparisonStep[]	required	Caller-supplied step content keyed by stable IDs. The same ID is retained across workflow changes.
before	WorkflowComparisonVersion	required	Current workflow with its label, ordered step IDs, and supplied metric.
after	WorkflowComparisonVersion	required	Updated workflow with its label, ordered step IDs, and supplied metric.
activeVersion	"before" \| "after"	undefined	Controlled selection. Pair with onVersionChange to let a consumer own the active version.
defaultVersion	"before" \| "after"	"before"	Initial uncontrolled selection. Invalid initial data falls back to the first non-empty workflow.
onVersionChange	(version: "before" \| "after") => void	undefined	Called when a visitor selects a workflow version.
label	string	"Workflow version"	Accessible name for the native radio group.
className	string	undefined	Additional classes merged onto the section root.

Customisation

The workflow section follows semantic surface, border, foreground and primary tokens. Give each conceptual step a stable ID in both versions; stepIds controls the displayed order, and each metric value and unit is shown as supplied without calculating an outcome.

<BeforeAfterWorkflow
  title="A process comparison"
  steps={steps}
  before={before}
  after={after}
  activeVersion={version}
  onVersionChange={setVersion}
  className="rounded-[2rem]"
/>

Frequently asked questions

Is Before After Workflow free for commercial use?: Yes. Before After Workflow is MIT licensed, so you can use it in personal and commercial projects without attribution.
Does the workflow section calculate the result metric?: No. Each workflow receives its own caller-supplied metric label, value and optional unit. The component presents that value and animates the transition between versions without making a business or performance claim.
Can I control which workflow version is selected?: Yes. Use activeVersion with onVersionChange for controlled state, or defaultVersion to let the native radio group manage the initial selection. Both versions and their supplied steps remain visible in the no-JavaScript fallback.

Related components

Want the full page this belongs to?Template Empire builds complete Next.js templates with connected product stories and polished section-level motion.Explore Template Empire templates