Hover Member Row

Interactive

A team roster where pointing at or keyboard-focusing a row lifts it into a rich preview — the avatar swells, an accent bar draws down the left edge, the role and bio slide open, a corner arrow eases in, and the other rows dim back. Hover and focus drive identical state (pointer wins ties); each row is a real anchor or button carrying a full aria-label so the reveal never gates assistive tech. Under prefers-reduced-motion every transform is dropped and the preview simply cross-fades in via opacity.

Inspired by Skiper UI — hover members (pattern) — independently built, not affiliated. Attribution policy

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/hover-member-row.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/hover-member-row.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="mx-auto w-full max-w-sm rounded-2xl border border-white/10 bg-[#0f0f10] p-2">
    <HoverMemberRow
      members={[
        { name: "Ada Lovelace", role: "Principal Engineer", bio: "Keeps the analytical engine humming and the roadmap honest." },
        { name: "Grace Hopper", role: "Compiler Lead", bio: "Turns nanoseconds into intuition and stray bugs into moths." },
        { name: "Alan Turing", role: "Research Director", bio: "Decides what is decidable, usually before lunch." },
      ]}
    />
  </div>

Props

HoverMemberRowProps extends Omit<React.HTMLAttributes<HTMLUListElement>, "onSelect">

Prop	Type	Default	Description
members*	HoverMember[]	—	The people to list. Each becomes one focusable row.
accent	string	"#8b5cf6"	Primary accent (bar, role text, arrow, focus ring). Mirrors `--pb-violet`.
accentTo	string	"#ec4899"	Secondary accent the drawing bar fades toward. Mirrors `--pb-fuchsia`.
onSelect	(member: HoverMember, index: number) => void	—	Fires with the picked member and its index on click / activation.

npm dependencies

motion