Draggable Reorder List

A smooth drag-to-reorder list using Framer Motion's Reorder API with spring physics, staggered entry, and optional item removal.

...

How to Import

Add this import to your component file

app/page.tsx

1import { DraggableReorderList, ReorderItem } from "@/components/lightswind/draggable-reorder-list"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

items	ReorderItem[]	-	The initial list of items. Each item needs an id and label.	Required
removable	boolean	true	If true, shows a remove button on each item.	Optional
onReorder	(items: ReorderItem[]) => void	-	Callback with the new item order after drag or removal.	Optional
className	string	-	Additional CSS classes for the container.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { DraggableReorderList, ReorderItem } from "@/components/lightswind/draggable-reorder-list";
2
3const items: ReorderItem[] = [
4  { id: "1", label: "First Item", description: "Description here" },
5  { id: "2", label: "Second Item", description: "Another description" },
6];
7
8export function ReorderDemo() {
9  return (
10    <DraggableReorderList
11      items={items}
12      removable
13      onReorder={(newOrder) => console.log(newOrder)}
14    />
15  );
16}

Previousdrag-order-list

Nextelectro-border

A product byＭＵＨＩＬＡＮ and Team❤️.

Draggable Reorder List

A smooth drag-to-reorder list using Framer Motion's Reorder API with spring physics, staggered entry, and optional item removal.

...

How to Import

Add this import to your component file

app/page.tsx

1import { DraggableReorderList, ReorderItem } from "@/components/lightswind/draggable-reorder-list"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

items	ReorderItem[]	-	The initial list of items. Each item needs an id and label.	Required
removable	boolean	true	If true, shows a remove button on each item.	Optional
onReorder	(items: ReorderItem[]) => void	-	Callback with the new item order after drag or removal.	Optional
className	string	-	Additional CSS classes for the container.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { DraggableReorderList, ReorderItem } from "@/components/lightswind/draggable-reorder-list";
2
3const items: ReorderItem[] = [
4  { id: "1", label: "First Item", description: "Description here" },
5  { id: "2", label: "Second Item", description: "Another description" },
6];
7
8export function ReorderDemo() {
9  return (
10    <DraggableReorderList
11      items={items}
12      removable
13      onReorder={(newOrder) => console.log(newOrder)}
14    />
15  );
16}

Previousdrag-order-list

Nextelectro-border

A product byＭＵＨＩＬＡＮ and Team❤️.

Draggable Reorder List

How to Import

Props

Basic Usage

On This Page

Contribute

Draggable Reorder List

How to Import

Props

Basic Usage

On This Page

Contribute

React Draggable Reorder List Component - Lightswind UI

Key Details of React Draggable Reorder List

Draggable Reorder List

How to Import

Props

Basic Usage

On This Page

Contribute

Draggable Reorder List

How to Import

Props

Basic Usage

On This Page

Contribute