All How It Works Blocks

Open any block on its own page for a live preview, the components it is built from, and the install command.

• How It Works 1 Static How It Works card with 3 numbered steps on a hairline grid and 2 header actions
• How It Works 2 Drifting isometric logo tiles topping 4 How It Works step cards in a 1, 2 or 4 column grid
• How It Works 3 Emerald 5-step How It Works card grid with dot texture, lime corner glow and capability rows
• How It Works 4 Horizontal 4-step How It Works tab strip driving an auto-advancing app console on a sky photo
• How It Works 5 Vertical 3-step How It Works tabs that swap analytics, crew coverage and HR dashboard consoles

How Each Block Lays Out Its Steps

• 3 steps on a hairline grid A single Card holds a linked eyebrow, the heading, a docs and registry Button pair and 3 Item steps that share hairline rules, stacked in 1 column until the container fits 3.
• 4 cards with isometric scenes Each card opens on a dark scene of drifting isometric logo tiles, swept by a light that runs along the grid lines, then a Step N Badge, a description and its own footer button, in a grid of 1, 2 or 4 columns.
• 5 cards on an emerald fill 5 numbered Card steps on a dark emerald surface with a dot texture and a lime corner glow, reflowing 1, 3 or 5 per row under a header with 2 capability rows.
• 4 step tabs over a registry console A Tabs strip of 4 steps, 1, 2 or 4 across by container width, that opens a registry overview with Progress bars, a component grid, a CLI install list and an integrations grid, all inside 1 app shell set on a sky photo.
• 3 step tabs beside 3 consoles A vertical tab column that sits beside a 4:3 frame on wide containers and swaps a production analytics screen with an order Table, a crew coverage desk and a people dashboard with a month calendar, with Avatar portraits in all 3.

Layout, Motion and Accessibility

• Every block switches its layout with container queries, so the steps reflow by the width of the column the block sits in rather than the width of the window.
• The 2 walkthroughs advance every 6 seconds (the 4 step strip) or every 5 seconds (the 3 step column), restart the wait when a step is picked, and hold while the pointer or keyboard focus is inside.
• Under prefers-reduced-motion the walkthroughs stop advancing, and the tile drift, the light sweeps, the sky photo drift and the console loops stop as well.
• The console content is decorative: the 4 step strip hides it from assistive tech and the 3 step column exposes each console as 1 labelled image, so a screen reader hears the steps rather than the fixture data.
• The isometric scenes and the emerald step cards keep a dark fill in both themes.
• The steps live in a data file inside each block, so changing the copy or the order of a step does not touch the markup.

Related Shadcn Marketing Block Categories

A how it works section explains the product. These are the sections around it.

• Hero The first screen of the page, where the promise is made that a how it works section then breaks into steps.
• CTA The band that closes the page once the steps have made the case, with a headline and a button.
• Pricing Plan sections for the reader who has followed the steps and now wants to know what it costs.
• FAQ Accordion sections for the questions a 3 to 5 step summary leaves open.

All Shadcn Block Groups

Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.

• Shadcn Application Blocks (307) Browse 307 Shadcn Application blocks across 22 categories.
• Shadcn Data Grid Blocks (38) Browse 38 Shadcn Data Grid blocks across 8 categories.
• Shadcn Solutions Blocks (66) Browse 66 Shadcn Solutions blocks across 9 categories.
• Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
• Shadcn Marketing Blocks (60) Browse 60 Shadcn Marketing blocks across 8 categories.
• Shadcn AI & Agents Blocks (17) Browse 17 Shadcn AI & Agents blocks across 2 categories.