Sticky Feature Scroll
Features
Source and install need .
pnpm dlx shadcn@latest add @assembli/how-it-worksHow It Works
Numbered process section. As the steps scroll into view they light up one after another: the number ticks, the rail draws on to the next marker and the step plays its own illustration. Steps carry optional durations that total into a closing bar with a call to action. Horizontal on large screens, a vertical rail on phones.
Props
Other props pass through to the root element.
eyebrow
React.ReactNode
Default
"How it works"title
React.ReactNode
Default
"From sign-up to shipped in an afternoon"intro
React.ReactNode
steps*
HowItWorksStep[]
summary
{ label?: React.ReactNode; total?: string; action?: { label: string; href: stri…
A closing bar under the steps.
totaldefaults to the sum of step durations given in minutes.
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | React.ReactNode | "How it works" | |
| title | React.ReactNode | "From sign-up to shipped in an afternoon" | |
| intro | React.ReactNode | – | |
| steps* | HowItWorksStep[] | – | |
| summary | { label?: React.ReactNode; total?: string; action?: { label: string; href: stri… | – | A closing bar under the steps. total defaults to the sum of step durations given in minutes. |
Related
Block
Stacking Feature Cards
Features
Zigzag Feature Rows
Features
Changelog Timeline
Timelines