Reorder List

Component 308

About

A vertical drag-and-drop list for reordering items, with full keyboard support (grab, arrow-move, drop, cancel) and screen-reader announcements.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Reorder List to your project and fits it to your theme.

Code

How Reorder List is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { ReorderList } from "@/components/ui/reorder-list";
import { useState } from "react";

type Track = { id: string; title: string; length: string };

const SETLIST: Track[] = [
  { id: "a", title: "Opening remarks", length: "5 min" },
  { id: "b", title: "Roadmap review", length: "15 min" },
  { id: "c", title: "Design critique", length: "20 min" },
  { id: "d", title: "Open questions", length: "10 min" },
];

export function ReorderListDemo() {
  const [agenda, setAgenda] = useState(SETLIST);

  return (
    <div className="grid w-full place-items-center">
      <div className="w-full max-w-[320px]">
        <ReorderList
          items={agenda}
          getId={(t) => t.id}
          getLabel={(t) => t.title}
          onReorder={setAgenda}
          label="Meeting agenda"
        >
          {(t) => (
            <div className="flex items-baseline justify-between gap-3">
              <p className="truncate text-[13px] font-medium text-stone-700 dark:text-stone-200">
                {t.title}
              </p>
              <p className="shrink-0 font-mono text-[10.5px] tabular-nums text-stone-500 dark:text-stone-400">
                {t.length}
              </p>
            </div>
          )}
        </ReorderList>
      </div>
    </div>
  );
}

export default ReorderListDemo;