## Hotspot Image (S—235)

An image with numbered hotspots: tap one to open its card, step through them in order, and see which you’ve visited.

- URL: https://sundaeui.dev/components/hotspot-image
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/hotspot-image.json`
- Tags: tour, hotspots, shoppable, image, annotations, product

Hotspots sit at percentage positions so they stay put at any size. Opening one shows a card with title, text and an optional price or link.
Next and Previous walk the hotspots like a mini tour; visited dots dim.

### Usage

```tsx
import { HotspotImage } from '@/components/sundae/hotspot-image'

<HotspotImage />
```

### Props

- `spots` (`{ x: number; y: number; title: string; text: string; meta?: string }[]`, required): Hotspots in percent.
- `children` (`ReactNode`, required): The image.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Product tours, shoppable rooms, annotated diagrams.

### When not to use

- Dense diagrams with many labels: use a legend.

### Accessibility

- Hotspots are buttons numbered in reading order with their title as label.
- The open card is a non-modal dialog; Escape closes it and returns focus.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: Previous / next hotspot
- Escape: Close card