Back to Components

Drag & Drop Reorder

A smooth, customizable, and accessible sortable list for modern applications.

Preview

  • Design
    Create beautiful experiences
  • Develop
    Build with modern tools
  • Test
    Ensure everything works
  • Deploy
    Launch to the world
  • Iterate
    Make it better

Installation

Install the component using the CLI.

npx shadcn@latest add https://shreyashtech.me/r/drag-drop-reorder.json

Usage

Import the component:

import { DragDropReorder } from "@/components/drag-drop-reorder"

Use it in your code:

<DragDropReorder />

Props

PropertyTypeDefaultDescription
itemsReorderItem[]-Array of { id, title, description, icon, color } (controlled).
onReorderfunction-Callback fired with the new order when dragging ends.
classNamestring-Additional classes applied to the outer card.