Skip to content
Pinky UI

drag

Sortable Chips

A compact tag collection with reorder, remove and add hooks.

  • drag
  • chips
  • tags
  • reorder

Live preview

Quick usage

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

<SortableChips items={tags} onReorder={setTags} onRemove={removeTag} />

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 compact ordered tag or filter collection with visible add/remove controls.

Use when

Priorities, tags, filter order, or navigation customization are short and bounded.

Avoid

Long arbitrary lists or a chip whose only removal path is a hidden gesture.

Accessibility

Label reorder and remove buttons with the chip name and announce order changes.

Keyboard and touch

Arrow keys and drag handles share the controlled order; add/remove are native buttons.

Reduced motion and performance

Use simple layout movement and no per-frame React pointer updates.

Composition and anti-patterns

Use a normal list when chip labels wrap into a dense editing surface.

Open this skill on its own page