Skip to content
Pinky UI

overlays

Shared Context Surface

Several sources rebind one persistent context surface, preserving its place and reducing layer churn.

  • overlays
  • shared
  • context
  • selection
Related pattern

One persistent context region rebinds across sources; it is not an inspector per selected object.

Live preview

Quick usage

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

<SharedContextSurface />

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 shared-context composition.

Accessibility

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

Performance

  • One context region is mounted for all source selections.
  • Switching sources updates content without opening another layer.

Reduced motion

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

When to use

  • Peer sources that share one explanatory or preview surface

When not to use

  • Independent inspectors that need separate ownership

Skill

Purpose

Use a shared context surface when several peer sources should rebind one persistent explanation or preview region.

Interaction anatomy

  • Peer buttons select one source.
  • One region stays mounted in the same place.
  • Only its content and selected relationship change.

Good for

Product overviews, compact source comparisons and expensive preview content.

Avoid

Independent inspectors that need separate ownership or simultaneous comparison.

Live example

Switch Overview, Signals and History to see one surface preserve its position.

Usage

tsx
<SharedContextSurface />

Tune

Keep the shared region stable, use concise source labels, announce meaningful changes and avoid mounting duplicate heavy previews.

Accessibility and reduced motion

Use selected state and a labelled, politely live region when the content changes. Keyboard and touch select the same sources. Reduced motion updates content in place.

Open this skill on its own page