Skip to content
Pinky UI

collections

Cursor Preview List

A text-first collection reveals one contextual preview near the active item while the list remains the primary surface.

  • collections
  • list
  • preview
  • pointer
  • editorial
Related pattern

Detached contextual browsing preview; not a tooltip and not a navigation menu.

Live preview

Quiet room

Quick usage

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

<CursorPreviewList items={items} label="Projects" />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

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

Props

PropTypeDefaultDescription
itemsCursorPreviewListItem[]—Labeled entries with one contextual preview surface each.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • Pointer coordinates write CSS variables; React changes only when the active item changes.
  • Only one preview is mounted for the engaged item.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Portfolio and editorial indexes where context should follow browsing intent

When not to use

  • Utility navigation, huge feeds or previews that obscure the labels

Skill

Purpose

Use a text-first list when the active entry needs one contextual media or content preview near the browsing intent. The list remains the thing being read; the preview confirms context rather than replacing the labels.

Interaction anatomy

  • Pointer movement selects one entry and positions a bounded detached preview.
  • Keyboard focus selects the same entry without requiring pointer coordinates.
  • Touch uses tap selection and an inline preview below the list.

Good for

Portfolio indexes, case-study lists and small editorial archives.

Avoid

Tooltips, utility navigation, huge feeds or previews that obscure essential text. Use CursorPreviewNav when the entries are destinations.

Usage

tsx
<CursorPreviewList
  label="Selected projects"
  items={projects.map((project) => ({
    id: project.id,
    label: project.title,
    description: project.summary,
    preview: <ProjectPreview project={project} />,
  }))}
/>

Tune

Keep one preview mounted, cap the preview size and give media stable dimensions. Clear pointer state on leave when no item retains focus.

Accessibility and reduced motion

Use real buttons for selection, aria-pressed for the active entry and visible focus. Touch must not depend on hover. Reduced motion keeps the selected preview and removes travel/fade.

Open this skill on its own page