Process Steps

An auto-playing, step-by-step process section with an image panel that follows the active step.

How We Work

A proven 4-step methodology designed to eliminate risk and deliver exceptional results on time and within budget.

01Discovery & Strategy

Install the component automatically via Shadcn CLI.

npx shadcn@latest add https://www.grettech.com/api/registry/process-steps

Prop	Type	Default	Description
title	string	"Our 4-Step Process"	Main heading.
subtitle	string	"From strategy to launch, we handle design, development, and growth—end to end."	Text under the main heading.
steps*	ProcessStep[]	-	The steps, in order. Any number works; auto-play cycles through them every 5 seconds.
pauseOnHover	boolean	true	Pause auto-play while the section is hovered or has keyboard focus. Auto-play is always off for users who prefer reduced motion.
className	string	-	Extra classes for the root <section>.
...props	React.HTMLAttributes<HTMLElement>	-	Any other section attributes (id, style, etc.).