MiHCM
data/@mihcm/ui·v0.21.0·stable

SortableList

Reorderable list powered by dnd-kit sortable primitives with pointer and keyboard sensors plus a renderItem slot for rich rows.

ConfiguratorExamplesUsageAccessibilityApi

Overview

Reorderable list powered by dnd-kit sortable primitives with pointer and keyboard sensors plus a renderItem slot for rich rows.

Use SortableList from @mihcm/ui with MiHCM semantic tokens and Tailwind utility classes. Keep layout, spacing, color, and state styling token-based so the component remains responsive and dark-mode compatible.

Install and import

npx @mihcm/cli add SortableList
import { SortableList } from '@mihcm/ui/SortableList';

Usage rules

  • Prefer the component API first, then extend with tokenized className overrides.
  • Do not use raw hex colors, inline styles, or local primitive forks.
  • Test mobile width, keyboard access, focus states, disabled states, and empty data.
  • Keep labels and descriptions visible or available through accessible names.