shadcn.io is not affiliated with official shadcn/ui
Centered Light Numbered Steps CTA Block for React Aria
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 React Aria. 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.