Row Spotlight
Use hover/focus emphasis to connect related values across one row.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Starter$12Good
Studio$24Best fit
Purpose
Use hover/focus emphasis to connect related values across one row.
Use when
Comparison, pricing, or analytics rows benefit from a quiet reading cue.
Avoid
Hiding data, relying on hover alone, or highlighting an entire dashboard at once.
Accessibility
Focus-visible state must match hover and all values remain readable.
Keyboard and touch
Use focusable row surfaces; touch receives the same content without a hover dependency.
Reduced motion and performance
Use background/outline transitions only and resolve immediately when requested.
Composition and anti-patterns
Combine with StickyDataHeader; do not turn it into a tooltip-only chart.
Source: packages/skills/lists/row-spotlight.md