Sortable List

Component

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";

export default function SortableChaptersDemo() {
  const [chapters, setChapters] = React.useState<string[]>([
    "Light",
    "Color",
    "The eye",
    "Reflection",
    "Refraction",
  ]);

  return (
    <Sortable
      items={chapters}
      onItemsChange={setChapters}
      itemKey={(c) => c}
      itemLabel={(c) => c}
      label="Chapter order"
      layout="row"
      className="chapters"
    >
      {(chapter, handle) => (
        <button type="button" className="chip" data-sortable-item {...handle}>
          {chapter}
        </button>
      )}
    </Sortable>
  );
}