Shadcn How It Work Blocks
Browse 21 Marketing Pro process blocks for shadcn/ui. Steps, timelines, and walkthroughs that show visitors exactly how your product works.
Marketing How It Work: Vertical Milestones
A split process section with a sticky header, CTA, and proof stats beside a vertical timeline of four numbered milestones with timing detail rows.
Marketing How It Work: Cycle Diagram
A numbered four step list beside a circular loop diagram with nodes on a dashed ring.
Marketing How It Work: Gantt Style Plan
The onboarding month as overlapping workstream bars with owners labeled per bar.
Marketing How It Work: Progress Bar Steps
Onboarding as a segmented meter frozen mid journey with honest time labels per step.
Marketing How It Work: Zigzag Steps
Alternating rows of step copy and app mockups, each tagged with a bordered step badge.
Marketing How It Work: Pipeline Flow
Inline SVG flow of four pipeline stages above a three column row explaining them.
Marketing How It Work: Three Step Cards
Centered heading above three step cards, each pairing an icon and number with short copy.
Marketing How It Work: Three Phase Path
A three phase process section with icon squares, arrow connectors on desktop, per phase checklists, and a quiet link to the onboarding guide.
Marketing How It Work: Checklist With Progress
The setup checklist mid flight, a computed meter above tasks in three states.
Marketing How It Work: First Week Timeline
Days one through seven in honest prose, including the two days of nothing on purpose.
Marketing How It Work: Steps With Mini Mockups
Three numbered step cards, each led by a mini UI mockup of the brief, board, and report stages.
Marketing How It Work: Day One Timeline
Intro copy beside a first day timeline of product moments keyed by monospaced times.
Marketing How It Work: Numbered Editorial
Four oversized numbered steps in a two column editorial grid with top borders.
Marketing How It Work: Step Tabs
Tabs labeled Step 1 to 3 where each panel pairs step copy with a small app mockup.
Marketing How It Work: Branching Flow
An SVG flowchart of automated checks branching to approve or review, with a numbered step list.
Marketing How It Work: Day In The Life
A workday told in timestamped scenes down a rule, each with its quiet before.
Marketing How It Work: Milestone Path
A winding dashed path with four numbered milestone dots above a matching grid of steps.
Marketing How It Work: Vertical Timeline
Narrow vertical timeline of four numbered steps joined by a line, with buttons below.
Marketing How It Work: Horizontal Connected
Three steps in a row joined by a thin connector line with a dot marking each step.
Marketing How It Work: Onboarding Checklist
Copy about a one afternoon setup beside a bordered checklist card with a progress bar.
Marketing How It Work: Split Steps With Mockup
Three numbered steps beside an app window mockup showing live metrics and a chart.