Walkthrough
A guided tour component that highlights elements and steps the user through features.
Ready to explore?
Click the button below. The tour will escape this preview box and highlight the actual navigation sidebar and search bar of this website.
Installation
Run the following command to install the `walkthrough` components:
npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/walkthrough.json
Centred steps
target is optional. Leave it off and the step sits in the middle of the screen with
the overlay dimming everything and nothing highlighted — the usual shape for an intro or a closing
step. The arrow is dropped too, since it would be pointing at nothing.The same thing happens when a
target is set but no element with that id is on the
page, so a step whose element is conditionally rendered degrades to a centred step instead of stranding
the popover in the corner. The tour above opens with one.Customization
You can fully replace the default popover card with your own design by passing a snippet. The
context object is passed to the snippet, giving you access to controls like
next() and close().Fully Custom Design
This button triggers a tour that uses a completely custom card layout (dark mode, purple accents) instead of the default shadcn style.