BlockReactregistry:block2 dependencies

3-step horizontal row

how-it-works-09

Minimal 3-step section with numbered circles, a full-width connector line and a centered CTA — no icons, type does the work.

@blockus Registry JSON

Live

Starting the live preview…

Runs in a sandboxed frame on a separate origin, in its registry's own theme. Mounted with no props — an item that paints an empty box is given its name as text, and some items need input to show anything.

Install

npx shadcn@latest add @blockus/how-it-works-09

Needs @blockus in your components.json registries — switch to URL if it doesn't resolve.

Registry: @blockus
Kind: Block
Framework: React
Files: 1 · 2.5 KB
Preview: Live
License: Not tracked · check @blockus

npm dependencies

lucide-react

Registry dependencies

buttonshadcn/ui

4 variants

Variants of this

Other takes on 3-step horizontal row from @blockus — the same idea in another design, language or styling.

Centered three-column path with numbered icons, kicker, headline and a single Get-started CTA.

Open

@blockus

More from @blockus

All 60 items

3-up centered team cards

team-02

Block

Footer with mission statement

footer-01

Block

3-card testimonial grid

testimonials-10

Block

Integration logo grid

integrations-01

Block

Dismissible update banner

banner-02

Block

Wide hero + two below

bento-02

Block

Split contact with details

Search the catalog

3-step horizontal row

Variants of this

More from @blockus