Skip to content
Pinky UI

overlays

Peek Overlay

A lightweight preview overlays its source so the user can inspect context without leaving the collection.

  • overlays
  • peek
  • preview
  • collection
Related pattern

An overlay that stays over its source; Peek Panel Collection owns the attached sibling-panel relationship.

Live preview

Quick usage

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

<PeekOverlay />

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
classNamestring—Styles the bounded peek collection.

Accessibility

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

Performance

  • One preview surface is reused for the active source.
  • Mobile can keep the same surface in the local flow.

Reduced motion

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

When to use

  • Short previews where the original collection should remain visible

When not to use

  • Full reading content or a collection that needs a side panel

Skill

Purpose

Use a peek overlay when a collection item needs a short preview but the original source list should remain visible underneath it.

Interaction anatomy

  • A source item opens one shared preview surface.
  • The overlay keeps the source label and a clear close path.
  • Mobile can let the same surface settle into the local flow.

Good for

Short project summaries, release notes and compact media context.

Avoid

Long reading content, independent multi-pane workflows or content that needs a permanent sibling panel.

Live example

Choose Project brief or Release notes to preview the source without changing collection context.

Usage

tsx
<PeekOverlay />

Tune

Keep preview content short, reuse one surface, clamp its placement and keep the source item visually connected.

Accessibility and reduced motion

Use labelled buttons with expanded state, a labelled preview region, Escape and an explicit close action. Touch must open by tap. Reduced motion swaps content without relying on a travel animation.

Open this skill on its own page