Sortable List

Component 1

About

A drag-and-drop reorderable list, grid, or row where items can be picked up and moved with mouse, touch, pen, or keyboard, with full screen-reader announcements and autoscroll.

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

Code

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

Usage.tsx

"use client";

import * as React from "react";
import Sortable from "@/components/ui/sortable";

interface Folio {
  name: string;
  hue: number;
}

export default function SortableFoliosDemo() {
  const [folios, setFolios] = React.useState<Folio[]>(
    ["1r", "1v", "2r", "2v", "3r", "3v"].map((name, i) => ({
      name,
      hue: 150 + i * 28,
    })),
  );

  return (
    <Sortable
      items={folios}
      onItemsChange={setFolios}
      itemKey={(f) => f.name}
      itemLabel={(f) => `Folio ${f.name}`}
      label="Folios"
      layout="grid"
      className="folios"
    >
      {(folio, handle, { dragging }) => (
        <button
          type="button"
          className={["tile", dragging && "dragging"].filter(Boolean).join(" ")}
          style={{ "--hue": folio.hue } as React.CSSProperties}
          data-sortable-item
          {...handle}
        >
          <span>Folio {folio.name}</span>
        </button>
      )}
    </Sortable>
  );
}