Drag Item

A set of styled list-row variants (handle, grip, up/down reorder, ghost placeholder, edge rail) that visually signal an item can be reordered, for you to wire up to your own drag-and-drop logic.

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

import {
  HandleItem,
  GripItem,
  ReorderItem,
  GhostItem,
  RailItem,
} from "@/components/ui/item-drag";

export default function ItemDragDemo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-2 p-6">
      <HandleItem />
      <GripItem />
      <ReorderItem />
      <GhostItem />
      <RailItem />
    </div>
  );
}