shadcn/ui how it works blocks & components.

How it works row of three numbered step cards, each with an icon tile, a title, and one line of supporting copy under a centered heading.

How it works timeline stacking four steps down a left rail, each with a bordered icon circle, a connecting line, a title, and supporting copy.

Interactive how it works stepper with clickable steps along a progress line that fills to the active step, stacking vertically on mobile.

How it works section of three alternating rows, each pairing a numbered step, description, and checklist with a mock UI preview panel on the opposite side.

Product walkthrough pairing a clickable step list with a synced mock panel that blur cross-fades from connecting data to configuring rules to a live dashboard.

How it works journey whose connector line draws across four numbered nodes as they blur rise into view, horizontal on desktop and vertical on mobile.

Editorial how it works layout pairing an outlined big numeral step list with a grayscale scene photo that drifts on scroll, plus a top right CTA.

How it works split pairing an animated adoption area chart and count-up stat band with a three step recap of connect, configure, and ship.

Tabbed how it works walkthrough where analytics, marketing, and operations tabs each reveal a three step flow beside an animated mock panel.

How it works grid of four step cards (connect, configure, automate, scale), each carrying a looping animated mini mock and lifting on hover.

Vertical how it works rail whose connector draws downward as each numbered step blur rises into view, every step carrying a small live detail panel.