Steps

Centred heading over three horizontal step cards built with shadcn/ui. Each step has a numbered primary circle, title and text, the circles are joined by a dashed connector line on desktop, and a single Button sits below. A classic "how it works" opener for a landing page.

Single-column vertical timeline for shadcn/ui: an ordered list on a left border with primary dots, where each of the four steps carries a title, a short paragraph and a secondary Badge for its duration. Reads well for onboarding schedules and delivery timelines.

Zigzag process timeline built with shadcn/ui tokens: a centre vertical line with numbered primary badges on desktop and four steps that alternate a rounded 4:3 photo and text from side to side. Collapses to a left-lined single column on mobile. Good for visual, story-driven processes.

Two-column process section using the shadcn/ui Accordion: a controlled, numbered Accordion of four steps on the left and a rounded photo frame on the right that swaps to the image of whichever step is open, with a step counter in its footer. Ideal for explaining a service without a wall of text.

Three-column shadcn/ui layout with a sticky left column (eyebrow, heading, lead and Button) beside a divided list of five steps with oversized faint numbers, titles and text. A long-form "how we work" section that keeps the call to action in view while scrolling.

History roadmap for shadcn/ui landing pages: five milestones along a horizontal line with primary dots and monospaced year labels on desktop, collapsing to a left-lined vertical timeline on mobile. Each milestone has a title and one line of text. Suited to about pages and investor sections.

Interactive progress tracker built with the shadcn/ui Progress and Button components: a progress bar bound to the active step, four clickable step chips beneath it and a bordered two-column panel showing the active step’s title, text, photo and Previous/Next controls. Great for guided onboarding explainers.

Scroll-driven process section for shadcn/ui: a sticky left list of four steps whose active item follows four tall muted icon panels scrolling on the right, tracked with IntersectionObserver and no external libraries. Highlights the current step with a primary number circle and foreground text.

Combines a process with social proof using shadcn/ui Card, Avatar and Badge: three compact icon-led step rows take two thirds of the width, and a muted quote Card with a result Badge and avatar attribution sits beside them. Good for conversion-focused "how it works" sections.

Playful four-column timeline for shadcn/ui: each step is a tilted polaroid-style Card with a square photo and caption, joined by a dashed connector with day labels above, and straightens on hover. A warm alternative to numbered lists for onboarding stories and behind-the-scenes sections.

Dense onboarding checklist for shadcn/ui: a left-aligned heading over a two-to-four column grid of eight small steps, each with a tinted icon square, a monospaced "Step 01" label, title and one line of text. Fits full process overviews without taking much vertical space.

Full-bleed inverted band (foreground background with background text) built with shadcn/ui tokens: a left heading with a secondary Button, then four steps in a row divided by faint vertical rules, each with an oversized translucent number, title and text. Adds contrast between lighter sections.

Controlled stepper for shadcn/ui: a custom horizontal header of four Button steps with numbered circles and connector lines (completed steps show a Check), a two-column panel with photo, paragraph and Check bullets below, and Previous/Next Buttons. Suits product tours and setup wizards.

Onboarding status list using shadcn/ui Badge and lucide icons: side text with a "3 of 6 complete" label and segmented progress on the left, and a vertical list on the right where completed steps show a primary CircleCheck with strike-through, the current step has a ring and an "In progress" Badge, and upcoming steps a hollow Circle.

Three alternating image and text rows for shadcn/ui: each row has a large two-digit primary eyebrow, title, paragraph, Check bullets and a rounded 4:3 photo, with sides swapping per row and an absolute dashed vertical line connecting them on desktop. A feature-rich way to tell a process story.

Compact single-strip process inside a muted rounded panel, built with shadcn/ui tokens: a small heading and price line, then four icon-led steps in a row separated by ArrowRight icons on desktop and stacked on mobile. Ideal as a light divider between heavier landing-page sections.

Centred heading over four steps, each with an inline SVG progress ring (25, 50, 75 and 100 percent via stroke-dasharray) around the step number, a percent label, title and text, in a two-to-four column grid. Pure shadcn/ui tokens with no chart library.

Four-column row built with shadcn/ui Card and Button: three bordered step Cards with icon, number, title and text, plus a fourth primary-coloured "Ready to ship?" call-to-action Card with a secondary Button. Turns a process explainer into a conversion point.

Two-column shadcn/ui section: a four-step vertical timeline with line and dots on the left, and on the right a sticky photo acting as a video placeholder with a centred round Play Button, a duration Badge and a caption. Works for product tours and warehouse or office walkthroughs.

Narrow single-column list for shadcn/ui: a large heading followed by five numbered items in a fixed-width two-column grid, with large primary two-digit numbers, a title and two-line text separated by bottom borders, closed by a line with an inline link. Suited to principles, promises or service-level pages.