Skip to content
Pinky UI

feedback

Conflict Resolution

Keeps local and external values visible together until the user chooses which version continues.

  • feedback
  • conflict
  • compare
  • local
  • external
Related pattern

Small, contextual conflict choice without pretending to be a full version-control interface.

Live preview

This item changed elsewhere

Choose which value should continue in this surface.

Your version

North star refresh

Latest version

North star refresh · updated elsewhere

Quick usage

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

<ConflictResolution localValue={draft} remoteValue={latest} />

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

Keep local and external values visible together until the user chooses which version continues.

Use when

An edited record changed elsewhere and a small comparison can support an informed keep-mine or use-latest choice.

Avoid

Silently overwriting local work, a full version-control interface for one field, or resolving the conflict through color alone.

Accessibility

Name both versions, describe the conflict in text, and give each resolution action a specific label. Announce the chosen result once.

Keyboard and touch

Keep both choices as native buttons with stacked mobile layout. Focus order should follow the comparison: local value, latest value, then any secondary action.

Reduced motion and performance

Resolve the comparison immediately when motion is reduced. Do not keep polling or retain stale external values after a choice is made.

Composition and anti-patterns

Show only the information needed to decide. Use Inline Save State for persistence without conflict and Connection State when the wider product is offline.

Open this skill on its own page