Skip to content
Pinky UI

lists

Row Spotlight

A hover and focus state that connects related values without hiding information.

  • lists
  • table
  • focus
  • comparison

Live preview

Starter$12Good
Studio$24Best fit

Quick usage

usage
import { RowSpotlight } from "@pinky-ui/systems";

<RowSpotlight><span>Plan · $24 · Active</span></RowSpotlight>

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

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.

Open this skill on its own page