Skip to content
Pinky UI

collections

Peek Panel Collection

A collection keeps its items visible while an attached neighbouring panel reveals context for the active item.

  • collections
  • collection
  • peek
  • panel
  • context
Related pattern

Attached contextual panel; it belongs to the collection layout instead of behaving like a drawer.

Live preview

Quick usage

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

<PeekPanelCollection items={items} label="Work collection" />

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
itemsPeekPanelCollectionItem[]—Visible collection entries with preview and adjacent detail 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

  • The detail surface is one sibling panel rather than one drawer per item.
  • Mobile stacks the same panel below the collection.

Reduced motion

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

When to use

  • Short collections where context should sit beside, not over, the source list

When not to use

  • Global drawers or detail that needs a separate route

Skill

Purpose

Use a peek panel when a collection should keep its source items visible while a neighbouring panel exposes focused context. The panel belongs to the collection layout; it is not a global drawer.

Interaction anatomy

  • The left or top collection remains available for scanning.
  • One adjacent panel changes for the active item.
  • Mobile stacks the same panel below the source list.

Good for

Small project collections, settings overviews and media indexes with short contextual details.

Avoid

Global navigation drawers, long detail pages or content that needs a route of its own.

Usage

tsx
<PeekPanelCollection
  label="Work collection"
  items={projects.map((project) => ({
    id: project.id,
    label: project.title,
    summary: project.client,
    preview: <ProjectCover project={project} />,
    detail: <ProjectSummary project={project} />,
  }))}
/>

Tune

Keep source rows and the panel visually related. Use one panel, stable selected identity and a short detail payload.

Accessibility and reduced motion

Use buttons with pressed state, keep the panel labelled and expose touch selection. Reduced motion swaps the panel immediately without changing source order.

Open this skill on its own page