Step 1 of 4 · Intake
Capture the signal while it still has context
A high-value event arrives with its source, timing and initial confidence intact.
Guided Product Tour
A free guided product tour feature section for React and Next.js.
See the whole workflow unfold
- Step 1 of 4Capture the signal while it still has context
- Step 2 of 4Attach the evidence that makes the next action clear
- Step 3 of 4Route a review to the person who can act
- Step 4 of 4Close the loop with a result worth trusting
Step 2 of 4 · Enrich
Attach the evidence that makes the next action clear
The same event gathers behavioural and account context instead of creating another disconnected alert.
Step 3 of 4 · Decide
Route a review to the person who can act
Evidence becomes an explicit approval path, with ownership and readiness visible in one place.
Step 4 of 4 · Outcome
Close the loop with a result worth trusting
The resolved event keeps its evidence, decision and outcome together for a complete audit trail.
Step 1 of 4
Step 1 of 4 · Intake
Capture the signal while it still has context
A high-value event arrives with its source, timing and initial confidence intact.
Customise
20px
Code
<GuidedProductTour
steps={steps}
/>Guided Product Tour is a free React feature section for Next.js, built with Motion and styled with Tailwind. It leads visitors through a persistent product workspace in ordered steps, so each state explains how one operational workflow changes from intake to outcome.
The step navigator uses real buttons, visible progress and Previous and Next controls, while the workspace updates in the direction of travel. It supports keyboard navigation, controlled or uncontrolled state and reduced motion, and the server output keeps every complete step available for crawlers and visitors without JavaScript.
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-product-tourUsage
import { GuidedProductTour } from "@/components/feat-product-tour";
function TourState({ label }: { label: string }) {
return (
<div className="rounded-xl border border-border bg-background p-6">
<p className="text-sm font-medium text-foreground">{label}</p>
</div>
);
}
const steps = [
{
id: "intake",
eyebrow: "Intake",
title: "Capture the event",
description: "Bring each incoming signal into one shared workflow.",
visual: <TourState label="Event captured" />,
},
{
id: "enrich",
eyebrow: "Enrich",
title: "Attach the evidence",
description: "Add the context that makes the next action clear.",
visual: <TourState label="Evidence attached" />,
},
{
id: "decide",
eyebrow: "Decide",
title: "Route the decision",
description: "Send the complete case to the right reviewer.",
visual: <TourState label="Review assigned" />,
},
];
export default function Page() {
return <GuidedProductTour steps={steps} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | ProductTourStep[] | required | Three to six ordered workflow states. Empty arrays render nothing. |
| title | string | "See the whole workflow unfold" | Section heading rendered as an h2. |
| description | string | undefined | Optional supporting copy below the section heading. |
| label | string | "Product tour" | Accessible name for the ordered step navigator. |
| defaultStepId | string | first step ID | Initial selected step for uncontrolled use. |
| activeStepId | string | undefined | Selected step ID for controlled use. Invalid IDs safely fall back to the first step. |
| onStepChange | (id: string) => void | undefined | Called after a user selects a different step. |
| previousLabel | string | "Previous step" | Accessible label for the previous-step control. |
| nextLabel | string | "Next step" | Accessible label for the next-step control. |
| transitionDistance | number | 20 | Directional workspace travel in pixels, clamped from 0 to 64. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Guided Product Tour exposes four Tier 3 variables for its accent, workspace surface and progress track. They include semantic fallbacks, so the installed component works outside the Template Empire theme. Use transitionDistance when you want to tune only the directional travel, and use className for layout changes without changing the workflow copy.
<GuidedProductTour steps={steps} transitionDistance={32} />
:root {
--feature-tour-accent: var(--primary);
--feature-tour-panel: var(--surface);
--feature-tour-progress-track: var(--border);
--feature-tour-progress-fill: var(--primary);
}Frequently asked questions
- Is Guided Product Tour free for commercial use?
- Yes. Guided Product Tour is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Does Guided Product Tour support keyboard navigation and reduced motion?
- Yes. The navigator uses real buttons with visible progress, arrow keys, Home and End shortcuts, and disabled endpoint controls. Reduced motion selects each workspace state immediately without travel or progress interpolation, while the full workflow stays available to visitors without JavaScript.
- How do I change the tour transition distance?
- Set transitionDistance to a value from 0 to 64 to control the directional travel in pixels. You can also retheme the workspace and progress line with the feature-tour custom properties on an ancestor element.