React Hotspot Diagram
Hardware is hard to describe in prose and trivial to describe by pointing. Pin numbered callouts to any visual — a die shot, a board photo, an instrument front panel — and let the reader drive.
KLV-7000 die floorplan, 5 nm — 16.3 mm² total.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| hotspots | Hotspot[] | { id, x, y, title, description, badge? } |
| src | string | Image URL for the base visual |
| alt | string | Alt text for that image |
| children | ReactNode | Custom visual layer, used when src is omitted |
| caption | string | Line under the visual |
| defaultActive | string | Hotspot id selected on mount |
x and y are percentages of the visual's box, so markers stay pinned at every width — no pixel maths, no breakpoint-specific coordinates.
Using an SVG instead of a photo
The demo above passes an inline <svg> floorplan as children rather than an image. That is usually the better choice for a diagram: it stays sharp at any size, it inherits your theme tokens, and it costs no network request. Reach for src when you have a real photograph.
The callout list doubles as the mobile layout — every hotspot is reachable without touching the image, which matters because a 7 mm tap target on a die shot is not a real interaction. Keep descriptions to one sentence; this is a signpost, not the datasheet.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.