Process Cards Timeline
A free process steps component with native-scroll card stacking for React and Next.js.
A clearer path from idea to release
Four focused stages keep ownership and evidence visible from the first brief to the final rollout.
- Step 1 of 4
Frame the decision
Define the user problem, success signal and boundary before work begins.
- Named owner
- One measurable outcome
- Step 2 of 4
Prototype the riskiest part
Test the assumption most likely to invalidate the direction.
- Realistic data
- Small review group
- Step 3 of 4
Validate with evidence
Pair behavioural signals with direct customer feedback.
- Decision log
- Release threshold
- Step 4 of 4
Ship and observe
Release progressively, watch the agreed signal and record the result.
- Staged rollout
- Post-release note
Customise
Code
<ProcessCardsTimeline
title="A clearer path from idea to release"
description="Four focused stages keep ownership and evidence visible from the first brief to the final rollout."
steps={[
{
id: "frame",
title: "Frame the decision",
description: "Define the user problem, success signal and boundary before work begins.",
details: ["Named owner", "One measurable outcome"],
},
{
id: "prototype",
title: "Prototype the riskiest part",
description: "Test the assumption most likely to invalidate the direction.",
details: ["Realistic data", "Small review group"],
},
{
id: "validate",
title: "Validate with evidence",
description: "Pair behavioural signals with direct customer feedback.",
details: ["Decision log", "Release threshold"],
},
{
id: "ship",
title: "Ship and observe",
description: "Release progressively, watch the agreed signal and record the result.",
details: ["Staged rollout", "Post-release note"],
},
]}
/>Process Cards Timeline is a free timeline and process steps component for Next.js and React, styled with Tailwind. It turns three to six ordered stages into numbered cards that form a restrained depth stack on fine-pointer desktop layouts while scrolling remains completely native.
Mobile, touch and reduced-motion visitors receive the same complete process steps as an ordinary static list. GSAP enhances only the desktop presentation, so the section never pins the viewport, changes scroll speed or hides its content when JavaScript is unavailable.
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/timeline-process-cardsUsage
import { ProcessCardsTimeline } from "@/components/timeline-process-cards";
const steps = [
{
id: "frame",
title: "Frame the decision",
description: "Define the user problem and success signal before work begins.",
details: ["Named owner", "One measurable outcome"],
},
{
id: "prototype",
title: "Prototype the riskiest part",
description: "Test the assumption most likely to invalidate the direction.",
details: ["Realistic data", "Small review group"],
},
{
id: "ship",
title: "Ship and observe",
description: "Release progressively, watch the agreed signal and record the result.",
details: ["Staged rollout", "Post-release note"],
},
];
export default function Page() {
return (
<ProcessCardsTimeline
title="A clearer path from idea to release"
description="Focused stages keep ownership and evidence visible."
steps={steps}
stackOffset={24}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | required | Section heading rendered as the single h2. |
| description | string | undefined | Optional introduction rendered below the section heading. |
| steps | ProcessCardStep[] | required | Three to six process steps in reading order. Each step has a stable id, title and description, with optional details and a decorative icon. |
| stackOffset | number | 24 | Visible vertical spacing between desktop stacked cards in pixels, clamped from 12 to 40. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Process Cards Timeline exposes four Tier 3 tokens. process-card controls the card surface, process-card-border sets its edge, process-card-number colours the visible step label and icon, and process-card-shadow controls depth beneath each card. Every token defaults to a semantic theme value.
:root {
--process-card: var(--surface);
--process-card-border: var(--ring);
--process-card-number: var(--primary);
--process-card-shadow: var(--background);
}
<ProcessCardsTimeline
title="How we work"
steps={steps}
stackOffset={30}
/>Frequently asked questions
- Is Process Cards Timeline free for commercial use?
- Yes. Process Cards Timeline is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does the card stack preserve native scrolling and reduced-motion accessibility?
- Yes. It uses ordinary CSS sticky positioning only on fine-pointer desktop layouts and never pins the viewport or intercepts scrolling. With reduced motion, on touch layouts or without JavaScript, the ordered cards remain static, fully visible and available to assistive technology.
- How do I change the spacing between stacked cards?
- Set stackOffset to a value from 12 to 40 pixels. The component clamps values into that range and applies the result through a scoped CSS custom property, so the geometry updates without changing the process content.