Popover
Popovers
Source and install need .
pnpm dlx shadcn@latest add @assembli/product-tourProduct Tour
A guided onboarding walkthrough: the page dims around a spotlight that glides from target to target, and a step card anchors beside each with an arrow, flipping sides when there's no room and following its target through scroll and resize. Progress dots, Back/Next/Done, Skip, arrow keys and Escape; a modal dialog that traps Tab, announces steps and returns focus.
- Dependencies
- lucide-react(npm, opens in a new tab)
Props
Other props pass through to the root element.
steps*
TourStep[]
open
boolean
defaultOpen
boolean
Default
falseonOpenChange
(open: boolean) => void
step
number
Controlled step index.
onStepChange
(step: number) => void
onFinish
() => void
Fires when the last step's Done button is pressed (not on skip or Escape).
padding
number
Default
6Space between the target and the cut-out edge, in px.
className
string
| Prop | Type | Default | Description |
|---|---|---|---|
| steps* | TourStep[] | – | |
| open | boolean | – | |
| defaultOpen | boolean | false | |
| onOpenChange | (open: boolean) => void | – | |
| step | number | – | Controlled step index. |
| onStepChange | (step: number) => void | – | |
| onFinish | () => void | – | Fires when the last step's Done button is pressed (not on skip or Escape). |
| padding | number | 6 | Space between the target and the cut-out edge, in px. |
| className | string | – |
