Gallery

Wizard frame

One step per screen: Step n of m with a Progress, one Card, Back and the one primary action.

Reference: ours (CMP SST set-up wizard; call tracking onboarding)

Preview

Step 2 of 7

Where is your site?

We look at it to suggest the right install.

Back

Focus rings

Step 2 of 7

Where is your site?

We look at it to suggest the right install.

Back

In each theme: Default · Trackable · SkillDecks · BetterMarketer

Install

npx shadcn@4.23.0 add https://ui.dobrin-dobrev.co.uk/r/wizard.json

Into an app set up with shadcn init --base radix; the parts it uses come with it.

Files

  • registry/default/blocks/wizard.tsx → components/blocks/wizard.tsx