shadcn.io is not affiliated with official shadcn/ui
Centered Light Numbered Steps CTA Block for React
A centred card-in-card call to action for a deploy platform: a headline, a sentence and the Shine Button, over a closing band of three setup steps staggered along a dashed path that draws itself once.
Installation
Overview
A centred card-in-card call to action that previews how simple it is to get started, for React with Base UI. A muted shell with + marks on its corners, between solid rails, wraps a raised panel that follows the theme. At the top of the panel sit a headline, a sentence about Skerry (a fictional deploy platform) and the Shine Button; a closing band under a hairline holds three numbered steps, the middle one set lower so a dashed path winds from one number to the next. The path draws itself once when the block appears. Each step has a number in a foreground circle, a title and a sentence. It's built from Guides and Shine Button, with CSS only for the entrance and the path. For developer tools, activation pages, setup guides and any conversion section where three steps sell the simplicity of signing up.
FAQ
How do I change the steps?
Edit STEPS at the top of the file: each step has a title, a description and an entrance delay. Set lowered on the step that should sit lower from the md breakpoint up. The numbers come from the order of the list, and the path is drawn for three steps, so keep three: two feel thin and four would need a longer path (d in the block's svg).
How is the dashed path drawn and kept under the numbers?
The path is one SVG curve behind the list. Its ends sit under the first and last numbers and its middle under the lowered one, because the three columns share the width equally (each number is centred in a sixth, a half and five sixths of it) and the lowered step is pushed down by exactly the drop the curve makes. A small ring around each number in the panel's colour leaves a gap where the path passes behind it. If you change the drop (md:mt-16) or the number's size (size-10), change the curve's viewBox and d to match.
What moves, and can I turn it off?
The shell fades up on load, the steps follow one after another, and the path is revealed from its start with a clip-path transition. It's all CSS, with no animation library, and it plays once. With reduced motion on, everything appears in place and the path is simply there.
How does it fit a phone?
Below the md breakpoint the three steps stack in one column, each with its number at the start and its text beside it, joined by a straight dashed line instead of the curve. The card keeps its inset from the rails, the button stays on the first screen, and nothing scrolls sideways down to 320 px.
Does it work in a right-to-left layout?
Yes. The steps run from the right, the numbers and text follow the reading direction, and the path is revealed from the right. The curve is symmetric, so it still joins the same numbers. The step numbers are wrapped so they stay as digits.
How is it read by a screen reader and a keyboard?
The headline is an h2 and each step is a list item with an h3, so the steps read in order as a numbered list. The numbers are text, and the path and the line are hidden from assistive technology. The only control is the Shine Button under the headline, which comes before the steps in reading and focus order and has the theme's focus ring.
Related
- Pro
Card Inset Step List CTA
Lists and stepsA reverse-split card-in-card call to action for a migration: a ruled timeline of three steps with a time chip each and a closing total, beside the headline and a Shine Button, with trust points on the shell beneath.
- Pro
Split Numbered Module List CTA
Lists and stepsA split CTA for a course: the pitch, a ruled row of totals and a Shine Button beside a numbered accordion whose modules are full-width rows ruled by solid hairlines, each opening to its lessons and durations.
- Pro
Centered Category Tile Grid CTA
With a closing bandA centred statement CTA for a template gallery between solid rails: a headline, a sentence with the total and the Shine Button, then a closing band of eight category tiles on shared hairlines, each with its own SVG wireframe, a name and a template count.
- 123Pro
Centered Three-Step Process Hero
Updates and timelinesA compact centred how-it-works hero for an invoicing app: a headline, a Shine Button with an outline action and trust copy over a closing band of three step cells, each with a small drawing of its screen.
- 123Pro
Stepper Wizard Pricing
Plan findersA three-question wizard in one ruled band, with numbered steps, the question beside its answer cards and Back and Next, that recommends a plan, then shows its price, features and a summary of the answers.
- Pro
Left Right CTA with Progress Ring Tracker
Lists and stepsA band call to action between solid rails: a headline, a sentence and the Shine Button at the start, and at the end a framed figure with a progress ring drawn in three arcs, one per setup step, with the steps listed beside it.