shadcn.io is not affiliated with official shadcn/ui
Dot Indicators Stepper Block for React Aria
A centred four-step newsletter composer with a subject, a note, a preview and a send slot, over a row of dots where the current one stretches into a pill.
Installation
Overview
Keep a short flow quiet, with this dot indicators stepper for React with React Aria. A narrow, centred frame holds one prompt and one field at a time: a subject line in an Input, the note in a Textarea, a preview of how the issue lands and a Radio Group of three send slots. Under the stage a row of four Steps dots sits between a Back arrow and the block's one Shine Button. Done dots are solid, later ones are hollow and the current one widens into a pill over 300 milliseconds. Each dot is a button once you have been there, named "Step 2: Write", and the arrow keys move between them. The status line reads "Step 3 of 4: Preview" after each move. For newsletters, announcements and any flow of a few short, quiet steps.
FAQ
How does the dot widen?
The catalog indicator is given a small size and the current one a wider width, with a transition on the width only. Under reduced motion the transition is off and the pill simply appears. Done and current dots both fill with the foreground color; width is what tells them apart, so it still reads without color.
How do keyboard users move between the dots?
The row is one tab stop, as tabs are: it lands on the current dot, and the left and right arrows (swapped in right-to-left) move focus along the dots you can reach. Enter or Space opens the focused step. Dots ahead of the furthest step you have visited are off, and Next is the way forward.
What stops me from going forward with an empty field?
Next and any dot ahead of the open step check the field first. With an empty subject or an empty note the step does not change and the polite status line says "Add a subject line first". Back and dots you have already visited are always free.
What stays local, and how do I wire it for real?
The subject, the note, the slot and the step are plain state, and nothing is sent: the last step ends on "Scheduled in this demo". To make it real, post the three values to your mail provider from the handler of the last Next and keep the confirmation step as it is.