ns-ui
A multi-step form whose completed steps physically interlock: each step contributes an SVG dovetail chip to a rail, sliding in to mate on a spring when valid, or bouncing off the joint and returning when it isn't.
Use when a checkout, onboarding, or config wizard where each step's completion needs to read as a trustworthy, physically locked-in commitment rather than a checkmark row — pick progress-narrated instead for a determinate progress bar that narrates phases as it fills, which advances continuously rather than gating on a mechanical, validity-tested join per discrete step.
Install
npx shadcn add https://design.helpmarq.comns-ui / wizard-dovetail
Each completed step joins the rail as a physical dovetail chip. Submit clean and it seats with a spring; submit with a gap left in a field and the chip bounces off the joint instead of a red asterisk doing the talking.
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | DovetailStep[] | — | — |
| defaultValues? | Record<string, string> | — | seed field values by field id, e.g. to demonstrate a pre-filled step |
| submitLabel? | string | — | label for the final step's submit button |
| onComplete? | (values: Record<string, string>) => void | — | — |
| className? | string | — | — |