Skip to content
Pinky UI

drag

Drag Ghost

A restrained preview surface intended to be mounted by a drag integration.

  • drag
  • preview
  • ghost

Live preview

Quick usage

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

<DragGhost active={dragging}>{snapshot}</DragGhost>

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

Accessibility

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use as a restrained snapshot while an item is actively being dragged.

Use when

A drag integration needs to preserve content recognition while the source moves.

Avoid

Floating decorative cards or a ghost that cannot communicate its destination.

Accessibility

The source and keyboard path remain available; the ghost is decorative only.

Keyboard and touch

Touch and keyboard alternatives should not depend on the ghost.

Reduced motion and performance

Use a transform and modest scale; avoid cloning heavy media or running a render loop.

Composition and anti-patterns

Compose with DropIndicator and a real drag sensor/state owner.

Open this skill on its own page