shadcn.io is not affiliated with official shadcn/ui
Card Content Stepper Block for Ark UI
A four-step club setup where each step is a raised card of real fields, and Continue checks the step's required fields and moves focus to the first one that is missing.
Installation
Overview
Put real fields inside a wizard step, with this card content stepper for React with Ark UI. A plus-marked frame on a tinted shell holds a Steps line of four numbered circles (Details, Rules, Dues, Launch) and, under it, a raised card with the step's own fields: a club name Input, a meeting day Select, a rules Textarea and a monthly dues Number Input. Continue checks what the step needs. A miss writes one short problem under the field, in the text colour with a small red icon, and focus lands on that field. Launch reads everything back in a Data List, and the card's foot has an outline Back and the block's one Shine Button. A polite line says "Step 2 of 4: Rules". For setup flows that collect a few real values before they create something.
FAQ
What does Continue check, and how do I add a rule?
Step one needs a club name of three letters or more, step two needs a rules text of twelve characters or more, and step three needs dues that are a number (zero is allowed, and the value is held between 0 and 99). Each check is a small function near the top of the file that returns a field name and a message, and problemOf picks the one for the current step. To add a rule, write another function and add it to that step's branch.
What stays local, and how do I make it real?
Everything. The values live in component state and the last button ends on a card that says "Created in this demo": no club exists and nobody is invited. To make it real, send name, day, rules and dues from the advance handler on the last step to your API, and show its answer in the final card in place of the sentence.
Where does focus go after Continue?
Nothing takes focus on load. After a successful move, focus goes to the new step's heading, which is focusable by script only, and the status line announces the step. After a failed check, focus goes to the first field with a problem and the problem is read as the field's description. Back and a press on a reached circle move focus to that step's heading too.
Does the card change height between steps?
No. Every step's panel has the same minimum height, and each field keeps a reserved line for its problem, so a message never pushes the Continue button down. On a phone the foot sticks to the bottom of the screen while the card is in view.
How does the keyboard work?
The step line is one tab stop on the current step. Arrow keys move between the steps you can reach, Home and End jump to the first and last, and Enter or Space opens the focused one. Steps ahead of the furthest one you have reached are disabled, so Continue, with its checks, is the only way forward.