Skip to content
Pinky UI

collections

Shared Preview Collection

Many compact collection entries control one larger shared preview that changes without duplicating heavy media surfaces.

  • collections
  • collection
  • shared-preview
  • selection
  • media
Related pattern

One shared preview surface for many entries; heavier content stays on demand.

Live preview

Quick usage

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

<SharedPreviewCollection items={items} label="Selected work" />

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
itemsSharedPreviewCollectionItem[]—Compact entries and their shared preview content.
classNamestring—Styles the outer interaction surface.

Accessibility

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

Performance

  • Only the engaged preview mounts; the catalogue stays light at idle.
  • Touch gets explicit entry buttons rather than a hover-only state.

Reduced motion

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

When to use

  • Portfolio indexes and media collections with one expensive preview region

When not to use

  • Every item needs simultaneous comparison or independent controls

Skill

Purpose

Use one shared preview for many compact entries when mounting a full media surface for every item would make the collection heavy or visually noisy.

Interaction anatomy

  • A compact entry rail exposes the collection at rest.
  • Hover, focus or tap changes one larger preview surface.
  • The preview swaps in place and keeps the selected title adjacent.

Good for

Portfolio indexes, product studies and media collections with one expensive contextual preview.

Avoid

Side-by-side comparison or items that each need independent controls simultaneously.

Usage

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

Tune

Keep previews bounded and mount only the engaged one. Use explicit entry buttons so touch never depends on hover.

Accessibility and reduced motion

Use a labelled list of buttons with pressed state and an aria-live preview region. Reduced motion swaps the shared surface immediately without hiding the selection.

Open this skill on its own page