BlockReactregistry:block2 dependencies

Three numbered steps

how-it-works-01

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

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-01

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

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

npm dependencies

lucide-react

Registry dependencies

buttonshadcn/ui

4 variants

Variants of this

Other takes on Three numbered steps from @blockus — the same idea in another design, language or styling.

Four-step vertical timeline with dashed rail, numbered nodes and an icon per step.

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

Three numbered steps

Variants of this

More from @blockus