Drag Reorder

Design review
Write tests
Update docs
Ship release

Drag Reorder demonstrates list reordering without a real user: a simulated cursor grabs a row by its drag handle, pulls it past the row below so the two swap, then slides back and releases. The full gesture runs on a GSAP timeline that repeats. Built with React and Tailwind CSS. Use it in feature grids for kanban tools, task managers, and any product where drag ordering matters.

Installation

Install dependencies.

Copy and paste the following code into your project.

Unlock the full library

Get all pro blocks, components & illustrations, and production-ready Next.js + Tailwind templates.

Get All Access

Update the import paths to match your project setup.