Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Popover with Steps for Vue

A Start Tour button that opens Step 1 of 3, with Previous and Next. Previous starts off, and Next turns off on the last step.

UI library: Ark UI

Start Tour opens Step 1 of 3 and the line Welcome to the tour. Let's get started! Previous is off. Next moves through three messages and turns off on the last step. The panel stays open.

Use it to introduce a feature where it lives. Next does not finish the tour for you. A tour that must block the page belongs in a Dialog. In Vue, Ark UI does not track the step.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Popover anatomy: trigger, title, positioner, arrow, description, content

Usage

<Popover>
  <PopoverTrigger :asChild="true">
    <Button variant="outline">Start Tour</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Step {{ step + 1 }} of {{ steps.length }}</PopoverTitle>
      <PopoverDescription>{{ steps[step] }}</PopoverDescription>
    </PopoverHeader>
    <div class="flex justify-between gap-2">
      <Button :disabled="step === 0" @click="handlePrevious" size="sm" variant="outline">
        Previous
      </Button>
      <Button :disabled="step === steps.length - 1" @click="handleNext" size="sm">
        Next
      </Button>
    </div>
  </PopoverContent>
</Popover>

FAQ

How does the step text change?

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.

When are Previous and Next disabled?

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.

What happens on the last step?

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.

How does Start Tour become the trigger?

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. Set asChild on PopoverTrigger and pass that one button. PopoverContent is the panel.

What are the three messages?

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.

How does this panel dismiss?

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.

API Reference

Popover

Sets asChild. The rest is on the Popover page.

Button

Sets variant="outline", disabled="step === 0", click="handlePrevious", size="sm", disabled="step === steps.length - 1" and click="handleNext". The rest is on the Button page.

All 15 popover examples