## Feature Tour (S—141)

A coach-mark tour: a ring moves between highlighted elements while a small card explains each with Back / Next.

- URL: https://sundaeui.dev/components/feature-tour
- Category: UI components · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/feature-tour.json`
- Tags: tour, spotlight, coach-marks, onboarding, tooltip, walkthrough

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.

### Usage

```tsx
import { FeatureTour } from '@/components/sundae/feature-tour'

<FeatureTour />
```

### Props

- `steps` (`{ target: string; title: string; body: string }[]`, required): Steps; target is a CSS selector inside the container.
- `onFinish` (`(completed: boolean) => void`): Called on Done or Skip.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### 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.

### 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.

### Keyboard

- → / Enter: Next
- ←: Back
- Esc: Skip tour