Back to Registry

Drag Reorder

input

Sortable list with drag-and-drop layout animations.

Colorblue-500
Width
Shadow

Live Preview

  • 1Design tokens
  • 2Spring config
  • 3Layout system
  • 4Accessibility

Drag items to reorder

Install via CLI
npx shadcn@latest add https://kinetik.dev/r/drag-reorder.json

Requires shadcn CLI. Auto-installs deps and copies the component into your project.

Manual Install
npm add framer-motion lucide-react

Then copy the source code below into your project.

Usage
import { DragReorder } from '@/app/components/drag-reorder';

Source

'use client';

export function DragReorder() {
  // copy from registry component source
}

Dependencies

framer-motionlucide-react