Order List

Component

About

A draggable, keyboard-accessible list that lets a user reorder a fixed set of rows by dragging the grip or using move-up/down/top/bottom buttons, reporting the new order as an array of values.

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

Code

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

Usage.tsx

import { OrderList } from "@/components/ui/order-list";
import { useState } from "react";

const OPTIONS = [
  { label: "Prelude", value: "prelude" },
  { label: "Fugue", value: "fugue" },
  { label: "Interlude", value: "interlude" },
  { label: "Coda", value: "coda" },
];

export default function OrderListDemo() {
  const [value, setValue] = useState(OPTIONS.map((option) => option.value));

  return (
    <div style={{ maxInlineSize: "22rem" }}>
      <OrderList
        value={value}
        onValueChange={setValue}
        options={OPTIONS}
        label="Movements"
      />
      <output
        style={{
          display: "block",
          marginTop: "var(--bs-space-2)",
          fontSize: "var(--bs-font-size-sm)",
          color: "var(--bs-color-text-tertiary)",
        }}
      >
        {value.join(" → ")}
      </output>
    </div>
  );
}