Drag Order List

A draggable, reorderable list built using React, Motion One, and Tailwind CSS. Items can be rearranged vertically via drag-and-drop gestures, with smooth animation and visual feedback.

...

How to Import

Add this import to your component file

app/page.tsx

1import { DragOrderList } from '@/components/lightswind/drag-order-list';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

items	DragItem[]	-	Array of draggable items. Each item should include `id`, `title`, `subtitle`, `date`, and optional `link`.	Required
onReorder	(items: DragItem[]) => void	`undefined`	Callback function triggered after the list is reordered. Receives the updated list of items.	Optional

Basic Usage

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

app/page.tsx

1import { DragOrderList } from '@/components/lightswind/drag-order-list';
2
3const items = [
4  {
5    id: 1,
6    title: "Task One",
7    subtitle: "This is the first task",
8    date: "2025-07-29",
9    link: "https://example.com/task-1"
10  },
11  {
12    id: 2,
13    title: "Task Two",
14    subtitle: "This is the second task",
15    date: "2025-07-28"
16  },
17];
18
19<DragOrderList
20  items={items}
21  onReorder={(newOrder) => console.log("Reordered items:", newOrder)}
22/>

Previousdock

Nextdraggable-reorder-list

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

Drag Order List

A draggable, reorderable list built using React, Motion One, and Tailwind CSS. Items can be rearranged vertically via drag-and-drop gestures, with smooth animation and visual feedback.

...

How to Import

Add this import to your component file

app/page.tsx

1import { DragOrderList } from '@/components/lightswind/drag-order-list';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

items	DragItem[]	-	Array of draggable items. Each item should include `id`, `title`, `subtitle`, `date`, and optional `link`.	Required
onReorder	(items: DragItem[]) => void	`undefined`	Callback function triggered after the list is reordered. Receives the updated list of items.	Optional

Basic Usage

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

app/page.tsx

1import { DragOrderList } from '@/components/lightswind/drag-order-list';
2
3const items = [
4  {
5    id: 1,
6    title: "Task One",
7    subtitle: "This is the first task",
8    date: "2025-07-29",
9    link: "https://example.com/task-1"
10  },
11  {
12    id: 2,
13    title: "Task Two",
14    subtitle: "This is the second task",
15    date: "2025-07-28"
16  },
17];
18
19<DragOrderList
20  items={items}
21  onReorder={(newOrder) => console.log("Reordered items:", newOrder)}
22/>

Previousdock

Nextdraggable-reorder-list

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

Drag Order List

How to Import

Props

Basic Usage

On This Page

Contribute

Drag Order List

How to Import

Props

Basic Usage

On This Page

Contribute

React Drag Order List Component - Lightswind UI

Key Details of React Drag Order List

Drag Order List

How to Import

Props

Basic Usage

On This Page

Contribute

Drag Order List

How to Import

Props

Basic Usage

On This Page

Contribute