Shadcn How It Work Blocks
Browse 10 Marketing Pro process blocks for shadcn/ui. Steps, timelines, and walkthroughs that show visitors exactly how your product works.
Marketing Pro How It Work: Day One Timeline
Intro copy beside a first day timeline of product moments keyed by monospaced times.
Marketing Pro How It Work: Horizontal Connected
Three steps in a row joined by a thin connector line with a dot marking each step.
Marketing Pro How It Work: Numbered Editorial
Four oversized numbered steps in a two column editorial grid with top borders.
Marketing Pro How It Work: Onboarding Checklist
Copy about a one afternoon setup beside a bordered checklist card with a progress bar.
Marketing Pro How It Work: Pipeline Flow
Inline SVG flow of four pipeline stages above a three column row explaining them.
Marketing Pro How It Work: Split Steps With Mockup
Three numbered steps beside an app window mockup showing live metrics and a chart.
Marketing Pro How It Work: Step Tabs
Tabs labeled Step 1 to 3 where each panel pairs step copy with a small app mockup.
Marketing Pro How It Work: Three Step Cards
Centered heading above three step cards, each pairing an icon and number with short copy.
Marketing Pro How It Work: Vertical Timeline
Narrow vertical timeline of four numbered steps joined by a line, with buttons below.
Marketing Pro How It Work: Zigzag Steps
Alternating rows of step copy and app mockups, each tagged with a bordered step badge.
Marketing Pro How It Work: Day One Timeline
Intro copy beside a first day timeline of product moments keyed by monospaced times.
Marketing Pro How It Work: Numbered Editorial
Four oversized numbered steps in a two column editorial grid with top borders.
Marketing Pro How It Work: Pipeline Flow
Inline SVG flow of four pipeline stages above a three column row explaining them.
Marketing Pro How It Work: Step Tabs
Tabs labeled Step 1 to 3 where each panel pairs step copy with a small app mockup.
Marketing Pro How It Work: Vertical Timeline
Narrow vertical timeline of four numbered steps joined by a line, with buttons below.
Marketing Pro How It Work: Horizontal Connected
Three steps in a row joined by a thin connector line with a dot marking each step.
Marketing Pro How It Work: Onboarding Checklist
Copy about a one afternoon setup beside a bordered checklist card with a progress bar.
Marketing Pro How It Work: Split Steps With Mockup
Three numbered steps beside an app window mockup showing live metrics and a chart.
Marketing Pro How It Work: Three Step Cards
Centered heading above three step cards, each pairing an icon and number with short copy.
Marketing Pro How It Work: Zigzag Steps
Alternating rows of step copy and app mockups, each tagged with a bordered step badge.
Marketing Pro How It Work: Day One Timeline
Intro copy beside a first day timeline of product moments keyed by monospaced times.
Marketing Pro How It Work: Onboarding Checklist
Copy about a one afternoon setup beside a bordered checklist card with a progress bar.
Marketing Pro How It Work: Step Tabs
Tabs labeled Step 1 to 3 where each panel pairs step copy with a small app mockup.
Marketing Pro How It Work: Zigzag Steps
Alternating rows of step copy and app mockups, each tagged with a bordered step badge.
Marketing Pro How It Work: Horizontal Connected
Three steps in a row joined by a thin connector line with a dot marking each step.
Marketing Pro How It Work: Pipeline Flow
Inline SVG flow of four pipeline stages above a three column row explaining them.
Marketing Pro How It Work: Three Step Cards
Centered heading above three step cards, each pairing an icon and number with short copy.
Marketing Pro How It Work: Numbered Editorial
Four oversized numbered steps in a two column editorial grid with top borders.
Marketing Pro How It Work: Split Steps With Mockup
Three numbered steps beside an app window mockup showing live metrics and a chart.
Marketing Pro How It Work: Vertical Timeline
Narrow vertical timeline of four numbered steps joined by a line, with buttons below.