Feature Tour
A coach-mark tour: a ring moves between highlighted elements while a small card explains each with Back / Next.
feature-tour.tsxfeature-tour.css
Checking access…
Overview
The spotlight ring glides from one target to the next, resizing to fit it, and the explainer card repositions above or below. Step dots show progress.
Escape or Skip ends it, and the last step’s button reads Done. Targets are any elements you pass refs or selectors for.
When to use
- First-run walkthroughs of a new screen or feature.
When not to use
- Explaining things that should be obvious: fix the UI instead.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/feature-tour.json$
npx shadcn@latest add https://sundaeui.dev/r/feature-tour.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/feature-tour.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/feature-tour.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy feature-tour.tsx and feature-tour.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { FeatureTour } from '@/components/sundae/feature-tour'
<FeatureTour />Props
| Prop | Type | Default |
|---|---|---|
steps*Steps; target is a CSS selector inside the container. | { target: string; title: string; body: string }[] | — |
onFinishCalled on Done or Skip. | (completed: boolean) => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- The card is a non-modal dialog labelled by its title; focus moves to it on each step.
- Escape skips; the step count is announced.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-ftu; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- → / Enter
- Next
- ←
- Back
- Esc
- Skip tour
FAQ
- Is Feature Tour free?
- Feature Tour is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Feature Tour?
- Run npx shadcn@latest add https://sundaeui.dev/r/feature-tour.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Feature Tour support keyboard and screen readers?
- The card is a non-modal dialog labelled by its title; focus moves to it on each step. Escape skips; the step count is announced.
- Does Feature Tour respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All components →Avatar Stack
Components · RefinedHover Card
Components · Refined- Pro
Story Viewer
Components · Refined Info Tip
Components · RefinedPermission Prompt
Components · RefinedHotspot Image
Components · Refined