Skip to content
Pinky UI

drag

Drop Indicator

A destination marker that distinguishes insertion from inside-container drops.

  • drag
  • drop
  • insertion
  • destination

Live preview

Task A
Task B

Quick usage

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

<DropIndicator position="between" active={isOver} />

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 to make an insertion or inside-container destination explicit during drag.

Use when

Rows, cards, or folders have more than one plausible drop location.

Avoid

A decorative line that is not connected to reorder/collision state.

Accessibility

Expose the destination in an announcement or visible status text.

Keyboard and touch

Keyboard reorder should communicate the same destination without a pointer.

Reduced motion and performance

Toggle visibility from drag state and use opacity/transform, not layout thrash.

Composition and anti-patterns

Mount it from DragReorderGrid or a host DnD integration; it is not a standalone drop zone.

Open this skill on its own page