Skip to content
Pinky UI

overlays

Edge Docked Panel

A contextual panel docks beside its source on wide screens and becomes an inline continuation on touch.

  • overlays
  • docked
  • panel
  • responsive
Related pattern

A responsive side-by-side continuation; Edge Swipe Panel remains the gesture-led viewport pattern.

Live preview

Workspace

The content makes room

On wide screens the panel docks beside this surface. On touch it becomes an inline continuation, so it never hides the page behind a drawer.

Quick usage

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

<EdgeDockedPanel />

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 docked workspace.

Accessibility

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

Performance

  • The desktop panel is part of the local grid, not a viewport drawer.
  • Mobile reflows it below the source instead of hiding content behind a layer.

Reduced motion

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

When to use

  • Persistent nearby context that deserves a little more room

When not to use

  • Transient one-line help or global navigation

Skill

Purpose

Use an edge docked panel when nearby context needs more room but should make space beside its source instead of covering the viewport.

Interaction anatomy

  • The source remains the primary content surface.
  • A panel docks beside it on wide screens.
  • The same panel becomes an inline continuation on touch.

Good for

Workspace context, compact inspection and adjacent product controls.

Avoid

Transient one-line help, primary navigation or viewport-level drawers.

Live example

Open the panel to see the source grid make room on desktop and stack on mobile.

Usage

tsx
<EdgeDockedPanel />

Tune

Set a readable panel width, preserve source hierarchy, use a safe mobile order and keep the panel content short enough to scan.

Accessibility and reduced motion

Expose expanded state and a labelled region, keep Close/Done reachable, and do not hide the source from the reading order. Reduced motion changes layout immediately.

Open this skill on its own page