Skip to content
Pinky UI

overlays

Nested Surface Stack

A contextual surface can open a child surface while preserving a clear back path through the local layer stack.

  • overlays
  • nested
  • stack
  • back
Related pattern

A bounded two-to-three level context stack with explicit Back, not nested dialogs.

Live preview

Quick usage

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

<NestedSurfaceStack />

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 nested surface host.

Accessibility

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

Performance

  • Only the current layer is presented; parent state remains in memory.
  • Escape closes the stack and Back removes one layer.

Reduced motion

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

When to use

  • Related settings or actions that need one level of local depth

When not to use

  • Deep application navigation or arbitrary modal nesting

Skill

Purpose

Use a nested surface stack when a local context has one or two related child surfaces and users need a clear Back path without losing the parent.

Interaction anatomy

  • The first surface establishes local context.
  • A child replaces the visible layer while parent state stays available.
  • Back removes one layer; Escape closes the stack.

Good for

Related settings, object actions and compact configuration branches.

Avoid

Deep application navigation, arbitrary dialog nesting or a full wizard.

Live example

Open layered settings, then move through Access and Billing before using Back.

Usage

tsx
<NestedSurfaceStack />

Tune

Keep depth shallow, label the current layer, preserve a stable close position and make parent context apparent.

Accessibility and reduced motion

Use a labelled region or dialog, focus the current layer, expose Back and Close as buttons, and restore focus to the original trigger. Reduced motion keeps the same stack semantics without sliding layers.

Open this skill on its own page