A how it works section with a vertical stepper beside a mock app window. Each step swaps the screen with a blur and slide, and the steps advance on their own with a progress bar.
How it works
No config files to write and no servers to babysit. Click through the flow to see each screen.
Import a repository
npx shadcn@latest add https://hyperblur.dev/r/how-stepper-screens.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/how-stepper-screens.tsx.
import { HowStepperScreens } from "@/components/hyperblur/how-stepper-screens"
<HowStepperScreens onStepChange={(i) => console.log(i)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "How it works" | Small label above the title. |
| title | string | "From repository to production in four steps" | Section heading. |
| subtitle | string | "No config files to write..." | Supporting text. |
| steps | { title: string; description: string }[] | 4 sample steps | Steps in the list. The mock screens cycle through four built-in scenes: repositories, templates, team and deploy log. |
| step | number | Controlled active step. Pair with onStepChange. | |
| defaultStep | number | 0 | Initial step when uncontrolled. |
| onStepChange | (index: number) => void | Called when the step changes by click, keyboard or autoplay. | |
| autoplay | boolean | true | Advance steps automatically. Pauses while hovered. |
| interval | number | 5000 | Milliseconds per step when autoplay is on. |
| accent | string | "#22d3ee" | Accent for the active number, progress bar and highlights. |