Popover with Steps for React

steps holds three strings, and the current step is a piece of state that starts at 0. PopoverTitle reads Step, the step number, then of 3, and PopoverDescription shows the current string. Both sit in PopoverHeader.

Previous is disabled on the first step and Next on the last. Both are size="sm", Previous uses variant="outline", and they sit in a flex justify-between gap-2 row. They use disabled.

Previous and Next only change the step; the open state isn't controlled. On the last step Next is disabled, and the panel stays up until Escape or a click outside.

The trigger is a Button with variant="outline" and the label Start Tour. Activating it opens the panel. Moving between steps leaves that open state alone. Pass the button to render on PopoverTrigger, and use PopoverContent as the panel.

They are the steps array: Welcome to the tour. Let's get started!, Here's an important feature to know about., and You're all set! Enjoy using the app. The title counts them from Step 1 of 3 through Step 3 of 3.

Escape closes the panel and returns focus to the trigger. A click outside closes it too. The panel sits beside the button, and the rest of the page stays usable.