Skip to content
Pinky UI

lists

Reorderable List

A controlled list with pointer drag handles, arrow-key moves and announcements.

  • lists
  • list
  • reorder
  • keyboard

Live preview

  • Research
  • Prototype
  • Release

Quick usage

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

<ReorderableList items={items} onReorder={setItems} />

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 for a short controlled collection whose order is meaningful to the product.

Use when

Task priorities, navigation items, or settings can be reordered by the user.

Avoid

Using drag as the only route or rerendering a large data grid for every move.

Accessibility

Provide handle labels, arrow-key movement, stable IDs, and live position announcements.

Keyboard and touch

Pointer, touch-friendly handles, and explicit up/down controls should share one order model.

Reduced motion and performance

Animate layout only when enabled and keep order updates controlled by the host.

Composition and anti-patterns

Use DragReorderGrid for two-dimensional collections and SortableChips for compact tags.

Open this skill on its own page